DOM动态增删表格内容所使用到的常用方法

最新推荐文章于 2021-06-20 04:40:45 发布

lx__angel

最新推荐文章于 2021-06-20 04:40:45 发布

阅读量517

点赞数

CC 4.0 BY-SA版权

文章标签： javascript dom 访问表格动态增删 id

本文链接：https://blog.csdn.net/lx__angel/article/details/78753638

本文介绍了一个使用JavaScript编写的简单表格生成器，用户可以自定义表格的行数、列数、标题及内容等属性。通过一个按钮点击事件即可完成表格的创建。

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

<html>
	<head>
		<title>00</title>
		<script type="text/javascript" charset="utf-8">
		
			function createTable(){
				var mybody=document.getElementById("mybody");
				var element=document.createElement("table");
				var rows=document.getElementById("rows");
				var cols=document.getElementById("cols");
				var caption=document.getElementById("mycaption");
				var mytext=document.getElementById("mytext");
				element.createCaption().innerHTML=caption.value;
				for(var i=0;i<rows.value;i++){
					element.insertRow(i);
					for(var j=0;j<cols.value;j++){
						element.rows[i].insertCell(j);
						element.rows[i].cells[j].innerHTML=mytext.value;
					}
				}
				element.border="1";
				mybody.appendChild(element);
				
			}
			
			
		</script>
	</head>
	<body id="mybody">
	
		创建一个
		<input type="text" id="rows" size="5"/>行，
		<input type="text" id="cols" size="5">列，
		标题为<input type="text" id="mycaption" size="8"/>,
		表格内容为<input type="text" id="mytext" size="8"/>的表格。<br/>
		
		
		<input type="button" value="开始创建" onclick="createTable()"/><br/><br/>
		<input type="button" value="删除最后一行"/><br/><br/>
		<input type="button" value="删除最后一个单元格"/>
		
	</body>

</html>