Question

有这样一个标记的部分：

<tr>
  <td class='a'>data1</td>
  <td class='a'>data2</td>
  <td class='a'>data3</td>
</tr>

有些输入会动态附加到 a class 的3个单元格中：

$("selector").has("selector").find(".a").append("<input 
type='text'/>");

所以输入在另一个下面绘制一个从输入构建三列的输入。

例如，我们有三行输入

任务是如何删除任何行（它不是表格行）？任何想法？

Answer 1

你可以做到这一点的一种方法是添加另一列，按钮与输入＆＃34;行＆＃34;排成一行。当您单击某个按钮时，在该列中获取它的索引，然后在该行的每个列中找到同样位于该索引处的输入，然后删除找到的输入和单击的按钮。

这样的事情：

＆＃13;

for (var i = 0; i < 5; i++) {
 $("table").has("tr").find(".a").append('<input type="text"/>'); 
 $("table").has("tr").find(".b").append('<button>X</button>'); 
}

$(document).on('click', '.b button', function(){
   var $clickedButton = $(this);
   var $buttons = $clickedButton.parent().find('button');
   var $tableRow = $clickedButton.closest('tr');   
   var curIndex = $buttons.index($clickedButton);  
   $tableRow.find('td').find('input:eq('+curIndex+')').remove();
   $clickedButton.remove();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tr>
    <td class='a'></td>
    <td class='a'></td>
    <td class='a'></td>
    <td class='b'></td>
  </tr>
</table>

＆＃13;

如何使用JQuery删除表格单元格的一些元素

1 个答案: