javascript - 我在 bootstrap 中有一个表 - 如何添加一个包含所选行的删除按钮的列？

Question

我在 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/

Answer 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
});

DEMO