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

到目前为止，最后一列包含静态'删除'字符串。 当用户点击那里的删除链接时，有没有办法动态删除行？

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

Answer 1

或者你可以将最后一个td的Remove包含在一个锚标记中，并给它一些类名，比如remove并向该类写一个click event 。

例如：

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

如果内容是动态添加的，您可以执行以下event delegation ：

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

DEMO

Answer 2

您可以在行的最后一行或包含文本的行中删除委托的click事件以及.closest()和.remove()以便遍历到最近的行并分别删除它：

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

工作演示

Answer 3

制作按钮。

 $("#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> 

Answer 4

这将删除整个tr / row-element及其子元素，但是您应该为您的删除按钮分配一个特定于此函数的类，例如js_remove_row。 因为这个句柄：“tr> td：last-child”如果你改变了你的桌子就可以锁定其他东西。 注意js-prefix让你知道这个类是一个javascript处理程序而不用于样式。 我也使用$（document）.on ...因为如果ajax-load部分页面或表格没有中断，文档总是在那里，如果重新加载你的内容你不必重置处理程序。

这有效：

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

Answer 5

你只需要在删除td时添加类来调用click事件并添加click事件来删除如下所示：

小提琴

<td class="center removetd">Remove</td>

jQuery的：

$(".removetd").click(function(){
  $(this).closest("tr").remove();
});

Answer 6

尝试使用event.target ， Node.textContent将click事件附加到tr元素，如果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>