Löschen Sie die erste Spalte einer ausgewählten Tabelle im Flug

Question

Können Sie bitte einen Blick auf dieses Snippet und lassen Sie mich wissen, wie ich im laufenden Betrieb trimmen (löschen Sie die erste Spalte) der ausgewählten Tabelle und an die #output anhängen kann ?

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

Ich würde das an den Ereignishandler hinzu:

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

Answer 2

ich einen demo auf JS Bin erstellt haben. Bitte schau es dir an.

Grundsätzlich, ich denke, die Idee ist, die erste Spalte (mit der Überschrift) abrufen, und an die output div, und löschen Sie es dann in der ursprünglichen Tabelle. Unten ist der JavaScript-Code:

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