Résumé: j'ai un modèle qui contient deux boutons d'ajout et deux tableaux. Lorsque l'utilisateur clique, les lignes de bouton d'ajout doivent s'ajouter au tableau respectif. Exemple:

    <div class="reports">
   <div class="panel">
    <table class="A">
     <thead>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
      <td>E</td>
      <td>F</td>
     </thead>
     <tbody></tbody>
    </table>
   </div>
   <button class="add" type="button">Add</button>
  </div>

Et jquery est

$('.reports').on('click','.add',function(){
    var path = $(this).parents('.reports').find(.A tbody);
    $(
            '<tr>'+
            '<td class="remove-row" role="button" aria-label="Remove Region"></td>'+
            '<td>'+value1+'</td>'+
            '<td><button>'+value2+'</button></td>'+
            '<td>'+value3+'</td>'+
            '<td>'+value4+'</td>'+
            '<td class="ordering" aria-label="Re-order"></td>'+
            '</tr>'
        ).appendTo(path);
});

Je veux ajouter les deux premières colonnes et faire quelque chose avec la valeur2 et ajouter la valeur3, la valeur4, la dernière colonne. exemple:

$('.reports').on('click','.add',function(){
        var path = $(this).parents('.reports').find('.A tbody');
        $('<tr>'+'<td class="remove-row" role="button" aria-label="Remove Region"></td>'+
        '<td>'+value1+'</td>').appendTo(path to first two columns);
        $('<td><button>'+value2+'</button></td>').appendTo(path to third column);
        $('<td>'+value3+'</td>'+'<td>'+value4+'</td>'+
         '<td class="ordering" aria-label="Re-order"></td>'+'</tr>').appendTo(path to last 3 columns);

    });

Je cherche la logique ici.

1
Gautam 20 juil. 2015 à 18:32

3 réponses

Meilleure réponse

Je ne suis pas sûr de ce que vous êtes jusqu'à mais essayez d'ajouter la condition avant d'ajouter et de pousser l'élément vers appendTo (). Ou vous pouvez utiliser le chaînage jQuery.

$('.reports').on('click','.add',function(){
    if (someInput = "Map"){
       var value2 += //do Something;
    }else{
       var value2 += someInput;
    }
    var path = $(this).parents('.reports').find(.A tbody);
    var newRow = $(
            '<tr>'+
            '<td class="remove-row" role="button" aria-label="Remove Region"></td>'+
            '<td>'+value1+'</td>'+
            '<td><button>'+value2+'</button></td>'+
            '<td>'+value3+'</td>'+
            '<td>'+value4+'</td>'+
            '<td class="ordering" aria-label="Re-order"></td>'+
            '</tr>'
        );
      newRow.appendTo(path)
      //You can do here whatever you want because the table is in DOM now          
});
1
Nanda 20 juil. 2015 à 19:07

Bien que je ne sois pas totalement sûr de votre objectif, vous pouvez utiliser insertCell() pour ajouter les «colonnes» dont vous avez besoin. Une fois que vous avez cela, vous pouvez alors remplir selon vos besoins

https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement/insertCell

1
Barett 20 juil. 2015 à 16:17

Je ne sais pas exactement ce que vous demandez, mais pour ajouter une colonne au milieu d'un tableau, vous pouvez utiliser le code / fonction suivant. Pour ajouter une ligne, utilisez votre fonction existante, assurez-vous simplement d'ajouter les guillemets dans votre appel .find où vous définissez le chemin, sinon il échouera. Le code ci-dessous suppose que vous souhaitez ajouter une colonne après la deuxième colonne (index de 1)

$('.reports').on('click', '.add', function () {
    $('.reports').find('.A tr').each(function () {
        $(this).find('td:eq(1)').after('<td>test</td>');
    });
});
$('.reports').on('click', '.add', function () {
    $('.reports').find('.A tr').each(function () {
        $(this).find('td:eq(1)').after('<td>test</td>');
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="reports">
    <div class="panel">
        <table class="A">
            <thead>
                <tr>
                    <td>A</td>
                    <td>B</td>
                    <td>C</td>
                    <td>D</td>
                    <td>E</td>
                    <td>F</td>
                </tr>
                <tr>
                    <td>A</td>
                    <td>B</td>
                    <td>C</td>
                    <td>D</td>
                    <td>E</td>
                    <td>F</td>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <button class="add" type="button">Add</button>
</div>
1
ctwheels 20 juil. 2015 à 15:52