使用JavaScript动态添加表格行-优快云博客

本文链接：https://blog.youkuaiyun.com/s853562285/article/details/38761007

这篇博客介绍了如何使用JavaScript动态地在表格中添加行。通过函数`addRow`，可以向ID为`testTable`的表格末尾插入一行，并包含五个单元格，每个单元格内含有输入框或删除按钮。同时，博客还提供了一个`delRow`函数用于删除最后一行。代码示例展示了如何操作DOM元素，实现信息录入的交互功能。

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

这里只写了JS的实现语句，jsp部分根据id对应做就行，这里实现动态添加一行进行信息录入

<script type="text/javascript" language="javascript">
function id(id)
{
return document.getElementById(id);
}
var count = 1;
function addRow(){
<span style="white-space:pre">	</span>var tableObj = id("testTable");
<span style="white-space:pre">	</span>var rowObj = tableObj.insertRow(-1);
<span style="white-space:pre">	</span>rowObj.setAttribute("id","newRow");
<span style="white-space:pre">	</span>var cellObj1 = rowObj.insertCell(-1);
<span style="white-space:pre">	</span>var cellObj2 = rowObj.insertCell(-1);
<span style="white-space:pre">	</span>var cellObj3 = rowObj.insertCell(-1);
<span style="white-space:pre">	</span>var cellObj4 = rowObj.insertCell(-1);
<span style="white-space:pre">	</span>var cellObj5 = rowObj.insertCell(-1);
<span style="white-space:pre">	</span>cellObj1.innerHTML = '<input type="text" name="e_id'+count+'" id="e_id'+count+'" οnblur="show_etypename()" size="7"/>';
<span style="white-space:pre">	</span>cellObj2.innerHTML = '<input type="text" id="e_type'+count+'" οnclick="showname()" size="14" disabled="disabled" />';
<span style="white-space:pre">	</span>cellObj3.innerHTML = '<input type="text" name="p_id'+count+'" id="p_id'+count+'" οnblur="show_ptypename()" size="7"/>';
<span style="white-space:pre">	</span>cellObj4.innerHTML = '<input type="text" id="p_type'+count+'" οnclick="showname()" size="14" disabled="disabled" />';
<span style="white-space:pre">	</span>cellObj5.innerHTML ='<input type="button" value="删除" οnclick="delRow(1)"/>';
<span style="white-space:pre">	</span>count++;
<span style="white-space:pre">	</span>
}
function delRow(obj){
<span style="white-space:pre">	</span>var tableObj = id("testTable");
<span style="white-space:pre">	</span>if(1==obj){
<span style="white-space:pre">		</span>tableObj.deleteRow(-1);
<span style="white-space:pre">	</span>}


}<span style="font-family: Arial, Helvetica, sans-serif;"></script></span>

JS动态添加行