javascript - 如何在表 : jquery 中追加列

Question

总结:我有一个包含两个添加按钮和两个表格的模板。当用户单击添加按钮时，行应附加到相应的表中。示例:

    <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>

jquery 是

$('.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);
});

我想追加前两列并对 value2 进行操作，然后追加 value3、value4、lastcolumn。示例:

$('.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);

    });

我在这里寻找逻辑。

Answer 1

我不确定你在做什么，但尝试在追加之前添加条件并将元素推送到 appendTo()。或者你可以使用 jQuery Chaining。

$('.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          
});