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

虽然我不完全确定您的目标，但您可以使用insertCell()来添加所需的“列”。完成后，您可以根据需要填写

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

Answer 2

我不确定你在问什么，但是为了在表格中间添加一列，你可以使用下面的代码/功能。要添加一行，请使用现有功能，只需确保在设置路径的.find调用中添加引号，否则它将失败。下面的代码假定您要在第二列（索引为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>

Answer 3

我不确定你是做什么但是尝试在append之前添加条件并将push元素添加到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          
});

如何在表中追加列：jquery

3 个答案: