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