动态增加单元表格

最新推荐文章于 2022-05-25 19:20:20 发布

susailor

最新推荐文章于 2022-05-25 19:20:20 发布

阅读量103

点赞数

分类专栏： javascript 文章标签： HTML

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>动态增加单元表格</TITLE>
 </HEAD>
 <script>
	function delrow(index)
	{
	var tab = document.getElementById("myTab");
	var rowLength = tab.rows.length;
	if(index > 0)
		tab.deleteRow(index);
	else
		alert("没有可再删选项");
	}

	function addrow()
	{
	//创建表格对象

	var tableObj = document.getElementById("myTab"); //取得id=myTab的dom元素
		

	var newRowObj = tableObj.insertRow(tableObj.rows.length); //获得表格的行数
		
	var newColName = newRowObj.insertCell(newRowObj.cells.length);//创建第1列

           var newColGender = newRowObj.insertCell(newRowObj.cells.length);//创建第2列

	var newColAge = newRowObj.insertCell(newRowObj.cells.length);//创建第3列

	var newColDep = newRowObj.insertCell(newRowObj.cells.length);//创建第4列

	var newColButton = newRowObj.insertCell(newRowObj.cells.length);//创建第5列

	//对单元格赋值
	newColName.innerHTML = "<input type='text' name='name' id='name'>";
	newColGender.innerHTML = "<input type='text' name='gender' id='gender'>";
	newColAge.innerHTML = "<input type='text' name='age' id='age'>";
	newColDep.innerHTML = "<input type='text' name='dep' id='dep'>";
	newColButton.innerHTML ='<input type="button" value="删除" οnclick="delrow('+(tableObj.rows.length-1)+')">';
	//此处有问题，待完善中}
	</script>
 <BODY>
	<div id="test">
		<table id="myTab" border="1" cellspacing="0" cellpadding="0">
			<tr><td width="30">姓名</td><td width="30">性别</td><td width="30">年龄</td><td width="30">部门</td><td width="30">操作</td></tr>
			<tr>
				<td><input type="text" name="name" id="name" value="sailor"/> </td>
				<td><input type="text" name="gender" id="gender" value="1 "/> </td>
				<td><input type="text" name="age" id="age" value=" 2"/> </td>
				<td><input type="text" name="dep" id="dep" value="IT"/> </td>
				<td><input type="button" value="删除" οnclick="delrow(1)"></td>
			</tr>
		</table>
	    <input id="add" type="button" value="增加一行" οnclick="addrow()">
	</div>
 </BODY>
</HTML>

susailor

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态增加单元表格

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;&lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt;动态增加单元表格&lt;/TITLE&gt; &lt;/HEAD&gt; &lt;script&gt; function delrow(index)
复制链接

扫一扫

专栏目录