1. 程式人生 > >js實現表格行的動態新增------Day56

js實現表格行的動態新增------Day56

現代頁面通常都是用div+css來進行設計,幾乎很少再有用table來進行佈局的了,但是這並不意味著table的重要性就降低了,事實上,table在資料處理上有著它獨特的優勢,所以對table的掌握還是很有必要的。

我們首先要記錄的問題是:js動態的新增表格的行和列

我們先給定一個table,先用html語言編寫下:

<table width="100%" height="300px" border="1px"  id="tad">
	  <tr><td>1</td><td>1</td></tr>
	  <tr><td>3</td><td>1</td></tr>
	  <tr><td>5</td><td>1</td></tr>
</table> 
這樣我們有了一個三行兩列的表格,表格的id為tad,顯示效果如下:

我們通常通過insertRow()來進行插入行,通過insertCell()方法來插入單元格,這樣我們來寫一下程式碼:

 var table = document.getElementById("tad");  
     oneRow = table.insertRow();//插入一行
     cell1= oneRow.insertCell();//單單插入一行是不管用的,需要插入單元格
     cell2=oneRow.insertCell();
     cell1.innerHTML = "sdf"; 
     cell2.innerHTML="<a href='#'>retet</a>";

則執行後則發現,效果已經達到了,在table中出現了新的一行

這裡如果不寫插入單元格,直插入行,值保留oneRow=table.insertRow(),則執行效果則是這樣

我們會發現確實出現了一行,但是並沒有單元格,沒有具體內容則表格是不完整的,所以一定要記得插入一行的同時插入其中的單元格,存在幾列就相應的插入幾個單元格,同時對於單元格的值進行設定都可以

好了,先到這裡吧,竟然已經這麼晚了,怪不得好睏啊