首先用HTML创建一个表格,
<table border="1" width="300">
<caption>人员信息表</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>小大哥</td>
<td>男</td>
<td>24</td>
</tr>
<tr>
<td>小大姐</td>
<td>女</td>
<td>20</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">合计:2人</td>
</tr>
</tfoot>
</table>
效果如下,
下面用JavaScript创建一个相同的表格,而不是对已有表格进行操作。JavaScript创建表格过程很繁琐,一般也不会有人这样用,大多是重复性的代码,但我还是耐着性子写下去,可写到最后就发现了问题,
window.onload=function(){
var table=document.createElement("table");
table.border=1;
table.width=300;
var caption=document.createElement("caption");
table.appendChild(caption);
var captionText=document.createTextNode("人员信息表");
caption.appendChild(captionText);
var thead=document.createElement("thead");
table.appendChild(thead);
var tr=document.createElement("tr");
thead.appendChild(tr);
var th1=document.createElement("th");
tr.appendChild(th1);
var thText=document.createTextNode("姓名");
th1.appendChild(thText);
var th2=document.createElement("th");
tr.appendChild(th2);
var thText=document.createTextNode("性别");
th2.appendChild(thText);
var th3=document.createElement("th");
tr.appendChild(th3);
var thText=document.createTextNode("年龄");
th3.appendChild(thText);
var tbody=document.createElement("tbody");
table.appendChild(tbody);
var tr=document.createElement("tr");
tbody.appendChild(tr);
var td1=document.createElement("td");
tr.appendChild(td1);
var tdText=document.createTextNode("小大哥");
td1.appendChild(tdText);
var td2=document.createElement("td");
tr.appendChild(td2);
var tdText=document.createTextNode("男");
td2.appendChild(tdText);
var td3=document.createElement("td");
tr.appendChild(td3);
var tdText=document.createTextNode("24");
td3.appendChild(tdText);
var tr=document.createElement("tr");
tbody.appendChild(tr);
var td1=document.createElement("td");
tr.appendChild(td1);
var tdText=document.createTextNode("小大姐");
td1.appendChild(tdText);
var td2=document.createElement("td");
tr.appendChild(td2);
var tdText=document.createTextNode("女");
td2.appendChild(tdText);
var td3=document.createElement("td");
tr.appendChild(td3);
var tdText=document.createTextNode("20");
td3.appendChild(tdText);
var tfoot=document.createElement("tfoot");
table.appendChild(tfoot);
var tr=document.createElement("tr");
tfoot.appendChild(tr);
var td=document.createElement("td");
tr.appendChild(td);
var tdText=document.createTextNode("合计:2人");
td.appendChild(tdText);
document.body.appendChild(table);
}
在控制台中显示出和预期的结构一样,
效果图如下,
但就是最后设置colspan属性时,发现不会在JS中设置,记录一下,找到解决方法再来修改。