フライで選択したテーブルの最初の列を削除する

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

私は、イベントハンドラにこれを追加します。私はJSビンにdemoを作成している

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

Answer 2

。チェックアウトしてください。

基本的には、最初の列（ヘッダー付き）を取得して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(); 
});