如何在表

Question

我已经开发了一个表格，我可以动态添加行和列。但问题是我想在表格的第一列和最后一列之间添加列，因为新列只在最后一列中添加。 / p>

$('#irow').click(function(){
    if($('#row').val()){
        $('#mtable tbody').append('<tr><td>Some Item</td></tr>');
        $('#mtable tbody tr:last td:first').html($('#row').val());
    }else{alert('Enter Text');}
});
$('#icol').click(function(){
    if($('#col').val()){
        $('#mtable tr').append($("<td>"));
        $('#mtable thead tr>td:last').html($('#col').val());
        $('#mtable tbody tr').each(function(){$(this).children('td:last').append($('<input type="text">'))});
    }else{alert('Enter Text');}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<table border="1" id="mtable" class="table table-striped table-hover individual">
    <thead><tr><td>Employee \department</td><td>Mandatory</td></tr></thead>
    <tbody></tbody>
</table><br/><br/>
<input id="row" placeholder="Enter Employee Name"/><button id="irow">Add Board</button><br/><br/>
<input id="col" placeholder="Enter department Name"/><button id="icol">Add Subject</button>

我想在“员工”和“强制”列之间添加新列。

请帮帮我

Answer 1

您始终在追加，将其作为最后tr放在td标记内，或将td标记放在另一个标记内。我的建议是插入新元素。例如：

＆＃13;

＆＃13;

$('#irow').click(function(){
    if($('#row').val()){
        $('#mtable tbody').append('<tr><td>Some Item</td></tr>');
        $('#mtable tbody tr:last td:first').html($('#row').val());
    }else{alert('Enter Text');}
});
$('#icol').click(function(){
    if($('#col').val()){
        var newCol = jQuery('<td/>', {
            text: $('#col').val()
        }).insertAfter('#mtable thead tr td:first');

        $('#mtable tbody tr').each(function(){$(this).children('td:last').append($('<input type="text">'))});
    }else{alert('Enter Text');}
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" id="mtable" class="table table-striped table-hover individual">
    <thead><tr><td>Employee \department</td><td>Mandatory</td></tr></thead>
    <tbody></tbody>
</table><br/><br/>
<input id="row" placeholder="Enter Employee Name"/><button id="irow">Add Board</button><br/><br/>
<input id="col" placeholder="Enter department Name"/><button id="icol">Add Subject</button>

＆＃13;

＆＃13;

＆＃13;

注意更改。添加了新的newCol td元素及其值，并在第一列之后插入：

if($('#col').val()){
    var newCol = jQuery('<td/>', {
        text: $('#col').val()
    }).insertAfter('#mtable thead tr td:first');

此外，如果您想要逆序，您可以切换到：

.insertBefore('#mtable thead tr td:last');

将在最后一列之前添加新列。你应该用这段代码解释你想要什么：

$('#mtable tbody tr').each(function(){$(this).children('td:last').append($('<input type="text">'))}