我有一个表在引导-我怎么能添加一个列，其中包含删除按钮选定行

I have a table in bootstrap - how can I add a column that contains remove button for selected row?

本文关键字：包含删除按钮一个有一个添加怎么能更新时间：2023-09-26

我在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>
    (...)

到目前为止，最后一列包含静态'Remove'字符串。当用户点击删除链接时，是否有一种方法可以动态删除行?

这是我的小提琴:http://jsfiddle.net/fyw6kajm/1/

或者您可以将在最后一个td中移除，并在锚标记中添加一些类名，例如remove，并将click event写入该类。

,

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

如果内容是动态添加的，您可以按以下方式执行event delegation:

$("#dataTables-example").on('click','.remove',function(){ $(this).closest('tr').remove(); //remove its root parent tr using closest });

你可以委派点击事件的最后td行或行，包含文本删除与.closest()和.remove()遍历到最近的行，并分别删除它:

$('body').on('click','td:contains(Remove)',function(){ $(this).closest('tr').remove(); });
演示工作

制作按钮。

$("#trigger-overlay2").click(function() { // $(this).toggleClass("active"); $(".overlay-boxify2").toggleClass("open"); }); $(document).on('click','.tr_remove',function(e){ e.preventDefault(); $(this).parents('tr').remove(); });
.overlay-boxify, .overlay-boxify2 { visibility: hidden; opacity: 0; -webkit-transition: opacity 0.5s, visibility 0s 0.5s; transition: opacity 0.5s, visibility 0s 0.5s; } .overlay-boxify.open, .overlay-boxify2.open { visibility: visible; opacity: 1; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; z-index:9999; } .overlay2 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url(../img/grid.png); background: rgba(222, 222, 222, 0.95); overflow: scroll; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="trigger-overlay2" href="#contact">Trigger!</a> <div class="overlay2 overlay-boxify2"> <div class="container"> <div class="row"> <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2"> <div class="tos-logo-contact"> <img src="../img/logo.png"></a> </div> <div class="panel-body"> <div class="dataTable_wrapper"> <table class="table table-striped table-bordered table-hover" id="dataTables-example"> <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 tr_remove">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 tr_remove">Remove</td> </tr> <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 tr_remove">Remove</td> </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 tr_remove">Remove</td> </tr> <tr class="odd gradeA"> <td>Trident</td> <td>Internet Explorer 7</td> <td>Win XP SP2+</td> <td class="center">7</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="even gradeA"> <td>Trident</td> <td>AOL browser (AOL desktop)</td> <td>Win XP</td> <td class="center">6</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Firefox 1.0</td> <td>Win 98+ / OSX.2+</td> <td class="center">1.7</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Firefox 1.5</td> <td>Win 98+ / OSX.2+</td> <td class="center">1.8</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Firefox 2.0</td> <td>Win 98+ / OSX.2+</td> <td class="center">1.8</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Firefox 3.0</td> <td>Win 2k+ / OSX.3+</td> <td class="center">1.9</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Camino 1.0</td> <td>OSX.2+</td> <td class="center">1.8</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Camino 1.5</td> <td>OSX.3+</td> <td class="center">1.8</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Netscape 7.2</td> <td>Win 95+ / Mac OS 8.6-9.2</td> <td class="center">1.7</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Netscape Browser 8</td> <td>Win 98SE+</td> <td class="center">1.7</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Netscape Navigator 9</td> <td>Win 98+ / OSX.2+</td> <td class="center">1.8</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Mozilla 1.0</td> <td>Win 95+ / OSX.1+</td> <td class="center">1</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Mozilla 1.1</td> <td>Win 95+ / OSX.1+</td> <td class="center">1.1</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Mozilla 1.2</td> <td>Win 95+ / OSX.1+</td> <td class="center">1.2</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> <tr class="gradeA"> <td>Gecko</td> <td>Mozilla 1.3</td> <td>Win 95+ / OSX.1+</td> <td class="center">1.3</td> <td class="center">A</td> <td class="center tr_remove">Remove</td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </div>

这会删除整个tr/row元素和它的子元素，但是你应该为你的remove按钮指定一个特定于这个函数的类，例如js_remove_row。因为这个句柄:"tr> td:last-child"可以针对其他东西，如果你改变你的表。注意js前缀，它让您知道该类是javascript处理程序，不用于样式化。我还使用了$(document).on…因为如果你ajax加载你的页面或表格的一部分，它不会中断，文档总是在那里，你不需要重置处理程序，如果重新加载你的内容。

如此:
$(document).on("click", "tr > td:last-child", function() { $(this).parent().remove(); });
这个更好:

<td class="center js_remove_row">Remove</td> $(document).on("click", ".js_remove_row", function() { $(this).parent().remove(); });

你只需要添加类来调用点击事件在删除td和添加点击事件删除，如下所示:

小提琴
<td class="center removetd">Remove</td>
Jquery:
$(".removetd").click(function(){ $(this).closest("tr").remove(); });

尝试将click事件附加到tr元素，使用event.target, Node.textContent，如果event.target文本为"Remove"则调用$(this).remove()
$("tr").click(function(e) { if (e.target.textContent === "Remove") $(this).remove() })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <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> (...) </table>

相关文章：
如何删除包含内容可编辑跨度的整个跨度元素

删除javascript中包含特定单词的行

在添加或删除之前，正在使用检查classList是否包含类

使用jquery删除包含的行

如何从包含字符串的对象中删除引号

如何删除包含特定子项的 li

Javascript:从数组中删除包含带有侦听器的对象的项目的最佳方法

对于包含特定字符串的每个元素，删除字符串及其后的所有内容

如果el包含此文本，请从中删除此字符串

如何删除包含包含某些数据的单元格的表行

正在Jquery中的列表中不包含任何元素的列表中删除

对于列表中包含带文本的跨度的每个li，请从该li中删除另一个跨度

通过JavaScript或jQuery删除P标记，其中包含不间断的空格

删除HTML脚本标记会对它所包含的JavaScript产生任何影响吗

删除HTML标签中包含的文本

从页面中删除除数组中包含的元素及其父元素/子元素之外的所有元素

删除一个元素，如果它包含某些内容，请使用 GreaseMonkey 中的 jQuery

AngularJS - 如果包含字符串，则删除ng重复项

Jquery包含删除某些字符

我有一个表在引导-我怎么能添加一个列，其中包含删除按钮选定行