javascript添加、删除行；insertRow/deleteRow/insertCell

最新推荐文章于 2022-02-08 20:52:40 发布

iteye_15406

最新推荐文章于 2022-02-08 20:52:40 发布

阅读量170

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/iteye_15406/article/details/82519528

js 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现的动态表格增删功能。通过简单的代码示例展示了如何在网页上创建一个可动态增加及删除行的表格，并详细解释了其工作原理。

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

<html>
<head>
<script type="text/javascript">
function addRow(){
		var newTr = document.getElementById("peopleTable").insertRow();
		var newTd0 = newTr.insertCell();
		var newTd1 = newTr.insertCell();
		newTd0.width = 50;
		newTd0.align = 'right';
		newTd0.innerHTML = ' ';
		newTd1.width = 200;
		newTd1.innerHTML = '<select id="peopletype" name="peopletype">'
	        + '<option value="1" selected="selected">主班</option>'
        	+ '<option value="2">副班</option>'
       		+ '</select> '
       		+ '<input type="text" name="people_Cn_" id="people_Cn_" readonly="readonly"/><input type="hidden" name="people" id="people" readonly="readonly"/> '
			+ '<img src="btn_channel_bg.gif" border="0" style="margin:0 0 -1px -22px;")> '
			+ '<img src="delete.gif" border="0" onclick="deleteRow(this);">';
	}
	function deleteRow(obj){
		var i=obj.parentNode.parentNode.rowIndex
		document.getElementById("peopleTable").deleteRow(i);
	}
</script>
</head>
<body>
<div id="stylized" class="myform">
    <form id="form" name="form" method="post" action="index.html">
        <h1>选择值班人员</h1>
        <p></p>
        <br>
        <table id="peopleTable" width="100%" border="0" cellpadding="0" cellspacing="0">
        	<tr>
        		<td width="50" align="right">人员： </td>
        		<td width="200">
        			<select id="peopletype" name="peopletype">
				        <option value="1" selected="selected">主班</option>
			        	<option value="2">副班</option>
			       	</select>
			       	<input type="text" name="people_Cn_" id="people_Cn_" readonly="readonly"/><input type="hidden" name="people" id="people" readonly="readonly"/>
       				<img src="btn_channel_bg.gif" border="0" style="margin:0 0 -1px -22px;">
       				<img src="add.gif" border="0" onclick="addRow();">
        		</td>
        	</tr>
        </table>
       <div class="spacer"></div>
    </form>
</div>
</body>
</html>