html js创建表格,javascript创建表格方式详解

你知道javascript创建表格的方式都有哪些吗?下面要给大家讲到就是这方面的内容，具体介绍了两种创建表格的方式。

方式1：

.table1

{

border:1px solid #00ff21;

width:200px;

height:200px;

margin:10px auto;  /*margin 设置 auto可以使居中显示*/

border-collapse:collapse; /*将td之间的空隙合并*/

}

.table1 td

{

border:1px solid #00ff21;

padding:4px;

}

.chk{

}

 <

script type = "text/javascript"

language = "JavaScript" >

//只有表格才有的创建方式

window.onload = function ()

{

var tableAdd = document.createElement("table")

tableAdd.id = "table1";

tableAdd.className = "table1";

document.getElementById("divTest")

.appendChild(tableAdd);

for (var i = 0; i 

{

var rowData = data[i];

var newRow = tableAdd.insertRow(-1); //-1表示在表格最后追加一行，参数代表要插入行的位置

newRow.insertCell(-1)

.innerHTML = "";

var newCol = newRow.insertCell(-1); //单元格已经添加导航中，并且返回单元格引用

//innerHTML是设置双标签的内容字符串，并且会自动解析HTML

newCol.innerHTML = rowData.id;

newRow.insertCell(-1)

.innerHTML = rowData.name;

newRow.insertCell(-1)

.innerHTML = rowData.age;

}

var lastRow = tableAdd.insertRow(-1);

var lastCol = lastRow.insertCell(-1);

lastCol.colSpan = 4;

lastCol.innerHTML = " 全选 删除";

document.getElementById("checkAll")

.onclick = allCheck;

}

/*实现全选*/

function allCheck()

{

var res = document.getElementById("checkAll")

.checked;

var chks = document.getElementsByClassName("chk");

for (var i = 0; i 

{

//为所有复选框的选中状态赋值：把全选复选框的选中状态设置给他们

chks[i].checked = res;

}

}

/*实现删除*/

function del()

{

var chks = document.getElementsByClassName("chk");

for (var i = 0; i 

{

var chk = chks[i];

if (chk.checked)

{

//获取复选框所在的行对象

var trObj = chk.parentNode.parentElement;

//通过行对象的父元素 删除行对象   因为删除只能通过父元素来删

trObj.parentElement.removeChild(trObj);

}

}

}

var data = [

{

id: 1

, name: "first"

, age: 12

}

, {

id: 2

, name: "second"

, age: 13

}

, {

id: 3

, name: "three"

, age: 12

}

, {

id: 4

, name: "fore"

, age: 13

}

, ];

方式2：var data = [

{

id: 1

, name: "first"

, age: 12

}

, {

id: 2

, name: "second"

, age: 13

}

, {

id: 3

, name: "three"

, age: 12

}

, {

id: 4

, name: "fore"

, age: 13

}

, ];

//原始的创建表格方式

window.onload = function ()

{

var tableAdd = document.createElement("table")

tableAdd.id = "table1";

tableAdd.className = "table1";

document.getElementById("divTest")

.appendChild(tableAdd);

for (var i = 0; i 

{

var rowData = data[i];

var newRow = document.createElement("tr");

tableAdd.appendChild(newRow);

var newCol0 = document.createElement("td");

newRow.appendChild(newCol0);

var checkBox = document.createElement("input");

checkBox.type = "checkbox";

newCol0.appendChild(checkBox);

var newCol = document.createElement("td");

//双标签有inner属性，表示可以设置内容

newCol.innerHTML = rowData.id;

newRow.appendChild(newCol);

var newCol2 = document.createElement("td");

//双标签有inner属性，表示可以设置内容

newCol2.innerHTML = rowData.name;

newRow.appendChild(newCol2);

var newCol3 = document.createElement("td");

//双标签有inner属性，表示可以设置内容

newCol3.innerHTML = rowData.age;

newRow.appendChild(newCol3);

}

var lastRow = document.createElement("tr");

tableAdd.appendChild(lastRow);

var lasttd1 = document.createElement("td");

lasttd1.colSpan = 4;

lasttd1.innerHTML = "  全选  删除";

lastRow.appendChild(lasttd1);

}

 <

/head> <

body >

/body> <

/html>

两种创建表格的方式你都了解了吗?更多javascript相关问题，请继续来奇Q工具网的常见问题栏目了解吧。

推荐阅读：