在飛行中刪除選定表格的第一列

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彬demo。請檢查一下。

基本上，我認爲這個想法是檢索第一列（與標題），並將其附加到output股利，然後在原始表中刪除它。以下是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(); 
});