js、table表格插入、新增、删除自定义行

本文链接：https://blog.csdn.net/qiang928/article/details/127932564

本文介绍如何使用JavaScript在HTML中实现表格行的新增、插入与删除功能，并提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html中表格行进行新增、插入、删除。

<table id="time_table" width="100%" border="0" cellpadding="2" cellspacing="1" bgcolor="#93CDF3" align="center" align="center">
                  <tr bgcolor="#F1FCFE" >
                  	<td width="5%" align="center" class="bk">序号</td>
                    <td>显示名称</td>
                    <td>字段名称</td>
                    <td>单位</td>
                    <td>&nbsp;</td>
                  </tr>
                  <tr bgcolor="#FFFFFF">
                  	<td height="38" align="center" class="bk">1</td>
                    <td style='text-align: center;'><input name="filedName" type="text" class="dfinput" style="width:150px" value=""/></td>
                    <td style='text-align: center;'><input name="label" type="text" class="dfinput" style="width:150px" value=""/></td>
                    <td style='text-align: center;'><input name="danwei" type="text" class="dfinput" style="width:150px" value=""/></td>
                    <td align="center" class="bk"><i class="icon-download-alt" onclick="addNewRow()">添加</i></td>
                  </tr>
                </table>

1、新增表格一行

function addNewRow() {
	var table1 = $("#time_table");
    var firstTr = table1.find("tbody>tr:first");
    var row = $("<tr bgcolor='#F1FCFE'></tr>");
    var td_1 = $("<td style='text-align: center;'></td>");
    var td_2 = $("<td style='text-align: center;'></td>");
    var td_3 = $("<td style='text-align: center;'></td>");
    var td_4 = $("<td style='text-align: center;'></td>");
    var td_5 = $("<td style='text-align: center;'></td>");
    td_1.append("");
    td_2.append($("<input name='filedName' type='text' class='dfinput' style='width:150px' value=''/>"));
    td_3.append($("<input name='label' type='text' class='dfinput'  style='width:150px' value=''/>"));
    td_4.append($("<input name='danwei' type='text' class='dfinput' style='width:150px' value=''/>"));
    td_5.append($("<i class='icon-trash' onclick='del(this)'>删除</i> <i class='icon-trash' onclick='addRow(this)'>插入</i>"));
    row.append(td_1);
    row.append(td_2);
    row.append(td_3);
    row.append(td_4);
    row.append(td_5);
    table1.append(row);
    var trs = $('#time_table').find('tr');
    $.each(trs, function(i) {
		if (i > 0) {
			$(this).find('td').eq(0).text(i);
		}
	});
}

2、删除表格行

function del(o) {
	var $obj = $(o);
	var trs = $('#time_table').find('tr');
	if (trs.length > 2) {
		$obj.parent().parent().remove();
	}
	trs = $('#time_table').find('tr');
	$.each(trs, function(i) {
		if (i > 0) {
			$(this).find('td').eq(0).text(i);
		}
	});
}

3、在某行后面插入新的一行

function addRow(o) {
	 var row = $("<tr bgcolor='#F1FCFE'></tr>");
	    var td_1 = $("<td style='text-align: center;'></td>");
	    var td_2 = $("<td style='text-align: center;'></td>");
	    var td_3 = $("<td style='text-align: center;'></td>");
	    var td_4 = $("<td style='text-align: center;'></td>");
	    var td_5 = $("<td style='text-align: center;'></td>");
	    td_1.append("");
	    td_2.append($("<input name='filedName' type='text' class='dfinput' style='width:150px' value=''/>"));
	    td_3.append($("<input name='label' type='text' class='dfinput'  style='width:150px' value=''/>"));
	    td_4.append($("<input name='danwei' type='text' class='dfinput' style='width:150px' value=''/>"));
	    td_5.append($("<i class='icon-trash' onclick='del(this)'>删除</i> <i class='icon-trash' onclick='addRow(this)'>插入</i>"));
	    row.append(td_1);
	    row.append(td_2);
	    row.append(td_3);
	    row.append(td_4);
	    row.append(td_5);
	var $obj = $(o);
	$obj.parent().parent().after(row);
	var trs = $('#time_table').find('tr');
    $.each(trs, function(i) {
		if (i > 0) {
			$(this).find('td').eq(0).text(i);
		}
	});
	//alert($tr);
}

具体可以下载我的资源看看