快速刪除選定表的第一列

Question

您能否看一下這個片段，讓我知道如何即時修剪（刪除）所選表並將其附加到#output ？

 $("#select-tbl").on("click", function(){ $('#output').append( $("#tbl-box").html()); }); 

 table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } th:nth-child(1) { background-color: #dddddd; } td:nth-child(1) { background-color: #dddddd; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="tbl-box"> <table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> <tr> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> </tr> <tr> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> </tr> <tr> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> </tr> <tr> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> </tr> </table> </div> <br /> <button id="select-tbl"> Select Table</button> <br /> <br /> <div id="output"> </div> 

Answer 1

我將其添加到事件處理程序中：

$('#output > table td:first-child').remove();
$('#output > table th:first-child').remove();

Answer 2

我已經在JS Bin上創建了一個演示 。 請檢查一下。

基本上，我認為這種想法是檢索第一列（帶有標題），並將其附加到output div，然后在原始表中將其刪除。 以下是JavaScript代碼：

$("#select-tbl").on("click", function(){
    // get the header of the first column
    var header = $('th:nth-child(1)').html();
    var table = $('<table></table>');
    table.append('<tr><th>' + header + '</th></tr>');
    // get each <td> element
    for (var i = 0; i < $("td:nth-child(1)").length; i++){
      var row = $('<tr></tr>');
      row.append('<td>' + $("td:nth-child(1)").eq(i).text() + '</td>');
      row.appendTo(table);
    }
    $('#output').append(table);
    // remove in the original table
    $('#tbl-box > table td:first-child').remove();
    $('#tbl-box > table th:first-child').remove();
});