js動態建立表格------Day59

js動態建立表格------Day59

剛剛不知道怎麼回事，CSDN部落格一直打不開，就在部落格園完成了今天的記錄，結果臨關機，登入了下，發現又好了，就再多花個幾分鐘轉下吧，也不管究竟在意的是什麼了，權當強迫症了...

前幾天記錄了動態添加一行一列：insertRow()和insertCell();動態刪除一行一列:deleteRow()和deleteCell()；選中一行：this的參數傳遞，這些都是實現的關鍵，但是這一切都建立在一個基礎上：那就是存在一個表格。今天就來記錄下動態建立表格的方法：

事實上在剛開始的時候，我只想到了一個方法，雖然到最後發現這個方法確實還是比較簡單的，就像是動態添加行和列一樣，整合起來不就是一個表格了麼：

來看一下編寫的代碼，同時還發現了它的產生方式：(這裡在html頁面上留了一個tableTest的div)

1 window.onload=function createTable1() {2     var table = document.createElement('table');3     for (var i = 0; i < 4; i++) {4      var row = table.insertRow();5      for (var j = 0; j < 2; j++) {6       var cell = row.insertCell();7       cell.innerHTML = "這裡是"+i +"行" +',' + j+"列";8      }9     }10     document.getElementById('tableTest').appendChild(table);11     table.setAttribute('border', '1');12 }

這樣來看一下產生的效果：

這裡可看到了吧，他是從下向上產生的行，從右向左產生的列，也就意味著，插入一行之後，再進行插入的話，是在其上方插入行，在左邊插入列，後來從網上搜尋了之後，原來還有好多方法，當然各種應用各有千秋，這裡簡單寫一下其它兩種方式：

1、產生元素

看代碼的產生步驟：

 1  window.onload=function createTable2() { 2     var table = document.createElement('table'); 3     var tbody = document.createElement('tbody'); 4     for (var i = 0; i < 4; i++) { 5      var tr = document.createElement('tr'); 6      for (var j = 0; j < 2; j++) { 7       var td = document.createElement('td'); 8       var inner = document.createTextNode("這個是"+i +"行"+ ',' + j+"列"); 9       td.appendChild(inner);10       tr.appendChild(td);11      }12      tbody.appendChild(tr);13     }14     table.appendChild(tbody);15     document.getElementById('tableTest').appendChild(table);16     table.setAttribute('border', '1');17 }

這樣再來看一下效果的話：

這個就是從上到下，從左至右的產生了吧，這個的話雖然理解上簡單，但是寫法上也比較麻煩呢。

2、數組編輯（拼接html語言）

看代碼的實現步驟：

1 window.onload= function createTable4() {2     var arr = new Array();3     arr.push('<table border=1><tbody>');4        for (var i = 0; i < 4; i++) {5            arr.push('<tr>');6         for (var j = 0; j < 3; j++) {7             arr.push('<td>' +"這裡是"+ i +"行"+ ',' + j +"列"+ '</td>');8         }9         arr.push('</tr>');10        }11        arr.push('</tbody><table>');12        13        document.getElementById('tableTest').innerHTML = arr.join('');14    }

這時候來看效果的話：

這個理解起來就更簡單了，就算是把Array改成字串拼接的話，我們可能理解的更清晰些，就跟在html語言裡面添加一樣吧，這樣寫起來最容易理解，但是確實有些囉嗦了。

 

事實上看到代碼的時候，確實自己就能明白該如何是怎麼實現的添加，但是最開始想到動態添加的時候，卻只想到了最近在研究的方法，就有點不周全了。今天開始補牙，還是有點害怕補牙啊，感覺好恐怖....

這花了三分鐘再把部落格園上寫好的轉到這裡來，是一種執念麼，還是一種矯情，哎，睡覺，天有些晚了...