动态添加/删除表格行(1)-优快云博客

本文介绍了一种使用JavaScript实现的动态向HTML表格中添加或删除行的方法。通过两个按钮触发添加或删除操作，并能获取每个输入框的值，适用于表单数据收集等场景。

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

动态添加/删除table的行

<script LANGUAGE="JAVASCRIPT">
var i= 0;
var a = 0; 
function insertRow(){
   i++;
   a++;
　 var otr=myTable.insertRow(myTable.rows.length);
　 var ocell=otr.insertCell(0);
　 ocell.innerHTML="<input type=text name='f1"+a+"'>" +
            "<input type='hidden' name='hd' value='f1"+a+"'>"
   var ocell=otr.insertCell(1);
   ocell.innerHTML="<input type=button  value=删除 onclick='deleteRow()'>"
}
function deleteRow(){
	if(i<=1){
		alert("不能删除，必须有一行");
		return;
	}
	i--;
	myTable.deleteRow(event.srcElement.parentElement.parentElement.rowIndex)
}
function get()
{
	var v = document.getElementsByName("hd");
	for(j=0;j<v.length;j++){
		//获得输入框的值
		var obj = document.getElementById(v[j].value);
		alert(obj.value);
	}	
}
</SCRIPT>
</HEAD>
<BODY>
<table id="myTable"  border="0" cellpadding="0" cellspacing="0">
</table>
<input type=button onclick="insertRow()"　 value="插入行">
<input type=button onclick="get()"　 value="get">
</BODY>

后台servelt访问代码;

String[] str = request.getParameterValues("hd");
//遍历，取出值
for(int i=0;i<str.length;i++) {
String value = request.getParameter(str[i]);
//...