JS动态创建表格

最新推荐文章于 2023-02-06 19:13:34 发布

须佐能乎！

最新推荐文章于 2023-02-06 19:13:34 发布

阅读量446

点赞数 1

分类专栏： HTML JavaScript 文章标签： javascript HTML js创建表格

本文链接：https://blog.csdn.net/qq_34416191/article/details/51728181

版权

JavaScript 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

HTML

13 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title>JS动态创建表格</title>
		<script>
			//表格1添加行
			function addR1() {
				var tab1=document.getElementById("table1");//获取表格对象
				
				var r   =tab1.insertRow();//insertRow():添加一个表格行，返回新添加的行对象
				r.height="30px";//设置行高
				var len =tab1.rows.length;//rows:表格对象中，行的集合
				alert("添加后的行数："+len);
			}
			
			//删除行
			function delR1() {
				var tab1=document.getElementById("table1");//获取表格对象
				var len =tab1.rows.length-1;//rows:表格对象中，行的集合
				tab1.deleteRow(len);//deleteRow(index)从指定索引开始删除表格行
				alert("删除后的行数："+len+1);
			}
			
		</script>
		
		
		<script>
			//表格2添加行
			function addR2() {
				var tab2=document.getElementById("table2");
				var r  =tab2.insertRow(0);//insertRow():添加一个表格行，返回新添加的行对象
				r.height="30px";//行对象设置高度
				r.bgColor="red";//行对象设置背景颜色
				for(var i=0;i<5;i++) {
					var c=r.insertCell();//添加一个单元格，并返回这个单元格对象那个
					c.innerText="单元格"+i;//单元格中设置普通文本
				}
				var len=tab2.rows.length;
				alert("添加后的行数："+len);
			}
			//删除行
			function delR2() {
				var tab2=document.getElementById("table2");
				var len =tab2.rows.length-1;
				tab2.deleteRow(len);
				alert("删除后的行数："+len);
				
			}
			//设置表格属性
			function setT() {
				var tab2=document.getElementById("table2");
				tab2.width="400px";//设置表格宽度
				tab2.bgColor="gray";//设置表格背景颜色
				tab2.cellSpacing="3px";//设置单元格间距
				tab2.border="2px";//设置边框
				
			}
			
		</script>
		

	</head>
	<body>
		<table border="1px" id="table1">
			<script>
				for(var i=0;i<3;i++) {
					document.write("<tr>");
					for(var j=0;j<3;j++) {
						document.write("<td>");
						document.write("单元格"+(i+j));
						document.write("</td>");
					}
					document.write("</tr>");
				}
			</script>
		</table>
		
		<input type="button" value="添加行" οnclick="addR1();">
		<input type="button" value="删除行" οnclick="delR1();">
		
		<table id="table2">
			<tr>
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>4</td>
			</tr>
			<tr>
				<td>11</td>
				<td>1</td>
				<td>31</td>
				<td>41</td>
			</tr>
		</table>
		<input type="button" value="添加行" οnclick="addR2();">
		<input type="button" value="删除行" οnclick="delR2();">
		<input type="button" value="设置行" οnclick="setT();">
	</body>
</html>

须佐能乎！

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS动态创建表格

JS动态创建表格 //表格1添加行 function addR1() { var tab1=document.getElementById("table1");//获取表格对象 var r =tab1.insertRow();//insertRow():添加一个表格行，返回新添加的行对象 r.height="30px";//设置行高
复制链接

扫一扫