表格创建的方法

创建表格,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>

table_1.png

• 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);

table_2.png

• 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);

table_3.png

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