创建表格,so easy啊,今天就创建表格这个小实例,来写写不一样的实现方法
- html标签实现
<div>
<table border="1" width="300px">
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>

- js实现
let table = document.createElement("table"); //创建表格
table.border = "1";
table.bgColor = "green";
table.width = "300px";
let tbody = document.createElement("tbody");
table.appendChild(tbody);
//创建第一行
let row1 = document.createElement("tr");
tbody.appendChild(row1);
let c11 = document.createElement("td");
c11.appendChild(document.createTextNode("5"));
row1.appendChild(c11);
let c12 = document.createElement("td");
c12.appendChild(document.createTextNode("6"));
row1.appendChild(c12);
//创建第二行
let row2 = document.createElement("tr");
tbody.appendChild(row2);
let c21 = document.createElement("td");
c21.appendChild(document.createTextNode("7"));
row2.appendChild(c21);
let c22 = document.createElement("td");
c22.appendChild(document.createTextNode("8"));
row2.appendChild(c22);
document.body.appendChild(table);

- js的方法实现
let table = document.createElement("table"); //创建表格
table.border = "1";
table.bgColor = "green";
table.width = "300px";
let tbody = document.createElement("tbody");
table.appendChild(tbody);
//创建第一行
let row1 = document.createElement("tr");
tbody.appendChild(row1);
let c11 = document.createElement("td");
c11.appendChild(document.createTextNode("5"));
row1.appendChild(c11);
let c12 = document.createElement("td");
c12.appendChild(document.createTextNode("6"));
row1.appendChild(c12);
//创建第二行
let row2 = document.createElement("tr");
tbody.appendChild(row2);
let c21 = document.createElement("td");
c21.appendChild(document.createTextNode("7"));
row2.appendChild(c21);
let c22 = document.createElement("td");
c22.appendChild(document.createTextNode("8"));
row2.appendChild(c22);
document.body.appendChild(table);

这些都是很简单的操作啦,有兴趣的小伙伴可以尝试一下哟!
网友评论