Question

我创建了一个表格，我在其中动态添加行和列。我想删除/编辑我要添加的行和列。我已经包含了我的代码

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

td{padding:5px;}

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

请帮我删除/编辑表格中的行和列

Answer 1

创建另一个输入和按钮，如小提琴中所示然后输入要删除的行的索引。您可以决定减去但输入0将删除第一行。

<code>
    $('#dcol').click(function(){
       var index = $('#col').val();
        $('#mtable tbody').find('tr').eq(index).remove()
    })

我准备了一个小提琴

https://jsfiddle.net/vdab98xk/

删除列

$('#mtable tr').each(function(){
  $(this).find('td').eq(index).remove(); 
})

编辑列

$('#mtable tr').eq(0).find('td').eq(index).text('New Value');

如何从表中动态删除/编辑行和列

1 个答案: