刚刚不知道怎么回事,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语言里面添加一样吧,这样写起来最容易理解,但是确实有些啰嗦了。
事实上看到代码的时候,确实自己就能明白该如何是怎么实现的添加,但是最开始想到动态添加的时候,却只想到了最近在研究的方法,就有点不周全了。今天开始补牙,还是有点害怕补牙啊,感觉好恐怖....
这花了三分钟再把博客园上写好的转到这里来,是一种执念么,还是一种矫情,哎,睡觉,天有些晚了...