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、数组编辑

看代码的实现步骤：

 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语言里面添加一样吧，这样写起来最容易理解，但是确实有些啰嗦了。

事实上看到代码的时候，确实自己就能明白该如何是怎么实现的添加，但是最开始想到动态添加的时候，却只想到了最近在研究的方法，就有点不周全了。今天开始补牙啊，还是有点害怕补牙啊，感觉好恐怖....