zoukankan      html  css  js  c++  java
  • 如何创建表格,创建行和列

    如何创建表格,创建行和列

     行: <input type="text" id="row" />
    	 列: <input type="text" id="col" />
    	 <button id="btn">创建</button>
    	 <div id="wrap">
    	 	 <!-- <table>
    	 	 	<tr>
    	 	 		<td></td>
    	 	 	</tr>
    	 	 </table> -->
    	 </div>
    	 <script type="text/javascript">
            function $(id){
    			return document.getElementById(id);
    		}
    		 $("btn").onclick=function(){
    			 $("wrap").innerHTML="";
    			 var rows=$("row").value;
    			 var cols=$("col").value;
    			 var oTable=document.createElement("table");
    			 oTable.border=2;
    			 oTable.style.width="300px";
    			 oTable.style.height="300px";
    			 for(var i=0;i<rows;i++){
    				var oTr=document.createElement("tr");
    				for(var j=0;j<cols;j++){
    				var	oTd=document.createElement("td");
    					oTr.appendChild(oTd);	
    				}
    				console.log(rows.value)
    				var endTd=document.createElement("td");
    				endTd.innerHTML="<a href='javascript:;'>删除</a>";
    				oTr.appendChild(endTd);
    				oTable.appendChild(oTr);	
    			 }
    			 $("wrap").appendChild(oTable);
    			 var as=document.querySelectorAll("a");
    			 for(var i=0;i<as.length;i++){
    				 as[i].onclick=function(){
    					if(confirm("你确定删除吗")){
    						this.parentNode.parentNode.remove();
    						if(oTable.children.length==0){
    							oTable.remove();
    						}
    					}
    				 }
    			 }
    		 }
    		
    	 </script>
    

    当点击按钮的时候,获取输入框中填入的行和列的值,创建表格,并给表格添加样式
    循环行和列数,创建行,然后创建列,并把列添加到行里面
    再把行添加到表格里,这样才能形成一个完整的
    表格。

  • 相关阅读:
    《你的灯还亮着吗》读后感1
    找"1"
    阅读计划---《梦断代码》3
    阅读计划---《梦断代码》2
    个人工作总结(10)
    个人工作总结(9)
    个人工作总结(8)
    个人工作总结(7)
    学习进度条
    个人工作总结(6)
  • 原文地址:https://www.cnblogs.com/lxystar/p/9934960.html
Copyright © 2011-2022 走看看