js 创建几行几列的表格

最新推荐文章于 2022-10-15 16:08:41 发布

王凯华

最新推荐文章于 2022-10-15 16:08:41 发布

阅读量5.3k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/baidu_39016558/article/details/86651314

版权

JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		table{width: 500px;border: 1px solid gray;border-collapse: collapse;}
		th,td{line-height: 35px;border: 1px solid gray;text-align: center;}
	</style>
</head>
<body>
	<label for="">行数：</label>
	<input type="text" id="input1">
	<label for="">列数：</label>
	<input type="text" id="input2">
	<button id="btn">创建</button>
	<script type="text/javascript">
        //获取对象
		var ipt1=document.getElementById('input1');
		var ipt2=document.getElementById('input2');

		var tab;//添加全局事件

	    //添加点击事件
	    document.getElementById('btn').onclick=function(){
	    	  //取第一个输入框的值
	    	  var ip1=parseInt(ipt1.value);
               //取第二个输入框的值
               var ip2=parseInt(ipt2.value);

             //判断页面是否包含表格，有表格就删除
             if(typeof  tab=='object'){
             	document.body.removeChild(tab);
             }
               

               //输出几行几列；
               creat(ip1,ip2);
	    };

     //创建函数
	 function creat(v1,v2){

		//创建表格
		 tab=document.createElement('table');

		// 将tr 行进行循环
		for(var i=0;i<v1;i++){	
				//创建tr
				var tr1=tab.insertRow();
	    

		    //将td  列进行循环；	
		    for(var j=0;j<v2;j++){
				//添加列td
			    tr1.insertCell().innerHTML='1';
	         }
        }
		//显示在页面中
		document.body.appendChild(tab);
   
     }
	
	</script>
</body>
</html>

王凯华

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
js 创建几行几列的表格

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style type="text/css"&gt; table{width:
复制链接

扫一扫

专栏目录