javascript - 从表附加到另一个表时添加额外的列

Question

enter image description here在这里，我尝试将一个表(3 列)附加到另一个表。效果很好。我需要一些额外的列。谁能帮帮我吗。我的片段。

function table2(){
 $('#one').on("click", function(){
    $('#one tbody input:checked').parent().parent().appendTo("#two");
 } 

Answer 1

这可能会有所帮助，这是一个示例。

// First of all this is an example, you has to modify this make as you wish
// Here we can add dynamic columns & rows
// Also , I have given an option to specify the row/column name
<table border="1" id="mtable">
    <thead>
        <tr>
            <td>Item</td><td>Red</td><td>Green</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Some Item</td><td><input type="checkbox"/></td><td><input type="checkbox"/></td>
        </tr>
    </tbody>
</table>
<br/><br/>
<input id="row" placeholder="Enter Item Name"/><button id="irow">Insert Row</button><br/><br/>
<input id="col" placeholder="Enter Heading"/><button id="icol">Insert Column</button>

<script>
    // This is add additional row to a table
    $('#irow').click(function(){
        if($('#row').val()){
            // Creates a copy of last row and you specify the name of row as well as
            // each <td>. Here I'm given a checkbox.
            $('#mtable tbody').append($("#mtable tbody tr:last").clone());
            $('#mtable tbody tr:last :checkbox').attr('checked',false);
            $('#mtable tbody tr:last td:first').html($('#row').val());
        }else{alert('Enter Text');}
    });
    $('#icol').click(function(){
        // This is add additional column to a table
        if($('#col').val()){
            // This is to append/add column to a table
            $('#mtable tr').append($("<td>"));
            $('#mtable thead tr>td:last').html($('#col').val());
            // This is to add a column to each rows in a table
            $('#mtable tbody tr').each(function(){
                $(this).children('td:last').append($('<input type="checkbox">'));
            });
        } else { alert('Enter Text'); }
    });
</script>