1. 程式人生 > >如何建立表格,建立行和列

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

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

 行: <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>

當點選按鈕的時候,獲取輸入框中填入的行和列的值,建立表格,並給表格新增樣式
迴圈行和列數,建立行,然後建立列,並把列新增到行裡面
再把行新增到表格裡,這樣才能形成一個完整的
表格。