添加、删除&清除表中的HTML元素

Add, Delete & Clear HTML Elements in a Table

本文关键字：HTML 元素 清除 删除 amp 添加      更新时间：2023-09-26

在需求场景中，我是button click上的add, delete textboxes & select dropdown。

演示

我的Add功能运行良好。如何Delete & Clear Rows。

对于Delete，最后一行应该被删除&当在删除之后添加CCD_ 7时，CCD_。

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

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

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

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

或者如果通过CCD_ 12 u均值移除所有未清除其中值的控件，则使用CCD_。

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

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

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

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

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

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]);
}

清除所有您的意思是，只清除输入。

我想这会有所帮助。

<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/

相关文章：