我在 bootstrap 中创建了一个表,基本上它包含不同的列和行,例如:
<thead>
<tr>
<th>Location</th>
<th>Date</th>
<th>Time</th>
<th>Duration</th>
<th>Content</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
<td class="center">Remove</td>
</tr>
<tr class="even gradeC">
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
<td class="center">Remove</td>
</tr>
(...)
到目前为止,最后一列包含静态“删除”字符串。有没有一种方法可以在用户点击那里的删除链接时动态删除该行?
这是我的 fiddle :http://jsfiddle.net/fyw6kajm/1/
最佳答案
或者你可以将你的 Remove 包裹在 last td
的 anchor 标记中,并给它一些类名,说 remove
并写一个点击事件
到那个类。
例如:
HTML
<tr class="odd gradeA">
<td>Trident</td>
<td>Internet Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
<td class="center"><a class='remove' href="#">Remove</a></td> <!--wrap in anchor tag-->
</tr>
<tr class="even gradeA">
<td>Trident</td>
<td>Internet Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
<td class="center"><a class='remove' href="#">Remove</a></td>
</tr>
JS
$('.remove').on('click',function(){
$(this).closest('tr').remove(); //remove its root parent tr using closest
});
如果内容是动态添加的,您可以按如下方式进行事件委托(delegate)
:
$("#dataTables-example").on('click','.remove',function(){
$(this).closest('tr').remove(); //remove its root parent tr using closest
});
关于javascript - 我在 bootstrap 中有一个表 - 如何添加一个包含所选行的删除按钮的列?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32711673/