HTML中table动态添加行或列

最新推荐文章于 2024-02-19 16:02:43 发布

转载最新推荐文章于 2024-02-19 16:02:43 发布 · 2w 阅读

文章标签：

#HTML #table #添加行和列 #insertRow #append

HTML 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用JavaScript为HTML页面动态添加表格行，并通过添加按钮实现自动化操作。

原文地址：http://www.cnblogs.com/badegg/articles/1334673.html

<html>
	<head>
	<script type="text/javascript">
		function AddTableRow()
		{
    		<span style="white-space:pre">	</span>var Table = document.getElementById("tab");   //取得自定义的表对象
    		<span style="white-space:pre">	</span>NewRow = Table.insertRow();                        //添加行
    		<span style="white-space:pre">	</span>NewCell1= NewRow.insertCell();                     //添加列
			NewCell2=NewRow.insertCell();
			NewCell1.innerHTML = "<B>这是新加的列</B>";          //添加数据
			NewCell1.innerHTML="<a href='#'>这是空链接</a>";
		}			 
	</script>
	</head>
	<body>
		<table id="tab">
			<tr><td>1</td></tr>
			<tr><td>2</td></tr>
		</table>
	<input type="button" id="bn" value="add" onclick="AddTableRow()" />
	</body>
</html>