如何将Javascript中单元格文字打印出来

最新推荐文章于 2024-04-28 22:45:00 发布

原创最新推荐文章于 2024-04-28 22:45:00 发布 · 236 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Java

Java 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript为HTML表格动态添加行的方法。通过获取表单输入值并创建新的表格行元素，可以将数据实时添加到表格中，提高了网页应用的交互性和数据管理效率。

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

<body>
	<table border="1px" bordercolor="yollow" width="400px" >
		<thead>
			<th>序号</th>	
			<th>姓名</th>
			<th>性别</th>
			<th>生日</th>
		</thead>
		<tbody id="t1">
			<tr>
				<td>1</td>
				<td>范冰冰</td>
				<td>男</td>
				<td>1998-4-1</td>
			</tr>
				
		</tbody>
	</table>
	<form>
		<p> 编号<input type="text" value=""</p>
		<p> 姓名<input type="text" value=""</p>
		<p> 性别<input type="text" value=""</p>
		<p> 生日<input type="text" value=""</p>
	</form>
	
	<input type="button"  value="按钮" onclick="javascript:addRow()" />
</body>
<script>
	function addRow(){
		
			var v =document.forms[0];
			
		var otr  = document.createElement("tr");
		var otd1 = document.createElement("td");
		var otd2 = document.createElement("td");
		var otd3 = document.createElement("td");
		var otd4 = document.createElement("td");
		
		otd1.innerHTML=v[0].value;
		otd2.innerHTML=v[1].value;
		otd3.innerHTML=v[2].value;
		otd4.innerHTML=v[3].value;
		
		
		otr.appendChild(otd1);
		otr.appendChild(otd2);
		otr.appendChild(otd3);
		otr.appendChild(otd4);
		
		var otbody = document.getElementById("t1");
		otbody.appendChild(otr)
	}

</script>