输入行数、列数一键创建表格

最新推荐文章于 2022-08-15 19:24:32 发布

m1541677068

最新推荐文章于 2022-08-15 19:24:32 发布

阅读量932

点赞数

本文链接：https://blog.csdn.net/m1541677068/article/details/102738949

版权

1：输入行数列数
在这里插入图片描述

2：样式

<style type="text/css">
		table{
		    width:300px;
		    height:300px;
		    border-color: #00e;
		    border-collapse: collapse;
		    }
		</style>
		
		<body>
			行：<input type="text" id="line"><br />
			列：<input type="text" id="list"><br />
			<input type="button" value="添加表格" onclick="create()">
			<p id="d1" style="height:400px; width:300px;"></p>
		</body>

3：事件

<script type="text/javascript">
		function create(){
		
		    var table=document.createElement("table");
		    table.setAttribute("border","1");
		    table.setAttribute("background","red");
		 
		    var line=document.getElementById("line").value;
		
		    var list=document.getElementById("list").value;
		    for(var i=0;i<=line;i++){
			//获取行
		    var tr=document.createElement("tr");
		        for(var j=0;j<=list;j++){
			//获取列
		    var td=document.createElement("td");
		        tr.appendChild(td);
		        }
		            table.appendChild(tr);
		        }
		    var bgcolor;
		    for(a=1;a<=tr;a++){
		    	if(a%2!=0){
		    		bgcolor = "#ffdddd"
		    	}else{
		    		bgcolor = "#ddddff"
		    	}
	
		    }
		        document.getElementById("d1").appendChild(table);
		    }
		</script>

m1541677068

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
输入行数、列数一键创建表格

1：输入行数列数2：样式<style type="text/css"> table{ width:300px; height:300px; border-color: #00e; border-collapse: collapse; } </style> <body> 行...
复制链接

扫一扫