Question

在需求方案中，我add, delete上的textboxes & select dropdown button click。

我的Add功能效果很好。如何Delete & Clear Rows。

对于Delete，最后一行应该被删除＆amp;删除后添加new Row时，id层次结构应继续。

Answer 1

$("#btnDelete").click(function () {
    $('#filterTable').find("tr:last-child").remove();
});

$("#btnClear").click(function () {
$('#filterTable').html("")  ;  
});

http://jsfiddle.net/842ur4zw/3/

Answer 2

find('tr:last-child')会找到最后一行，remove()会将其删除。使用find('input')你可以找到所有输入，只需为它分配emty字符串。

 $("#btnDelete").click(function () {
    $('#filterTable').find('tr:last-child').remove();
 });

 $("#btnClear").click(function () {
    $('#filterTable').find('input').val('');
 });

或者，如果按clear all表示删除所有未清除值的控件，请使用empty()，如下所示。

$("#btnClear").click(function () {
    $('#filterTable').empty();
 });

Answer 3

您可以使用此.. empty（）并删除函数

 $("#btnDelete").click(function () {

     $('#filterTable').find("tr:last-child").remove();


 });

 $("#btnClear").click(function () {
     var id = $('table tr').size();
     $("#filterTable").empty();
 });

Answer 4

JS Fiddle

// to delete the first child which was added

$("#btnDelete").click(function () {
    $('#filterTable tr:first').remove()
});

// to clear the values of input field

$("#btnClear").click(function () {
    $('#filterTable input').val(" ")
});

Answer 5

var myTable = document.getElementById('tab_Id');
var tableRows = myTable.getElementsByTagName('tr');
var rowCount = tableRows.length;

for (var i=rowCount-1; i>0; i--) {
   myTable.removeChild(tableRows[i]);
}

Answer 6

明确你的意思，只有明确的输入。

我想这会有所帮助。

<form>
    <table id="filterTable"></table>
    <input type="button" id="btnAdd" value="Add" />
    <input type="button" id="btnDelete" value="Delete" />
    <!-- previous
    <input type="button" id="btnClear" value="Clear All" />
    -->
    <input type="reset" id="btnClear" value="Clear All" />
</form>

http://jsfiddle.net/842ur4zw/4/

添加，删除＆amp;清除表中的HTML元素

6 个答案: