你知道javascript创建表格的方式都有哪些吗?下面要给大家讲到就是这方面的内容，具体介绍了两种创建表格的方式。
方式1：
<style type="text/css">
.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{
}
</style> <
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 < data.length; i++)
{
var rowData = data[i];
var newRow = tableAdd.insertRow(-1); //-1表示在表格最后追加一行，参数代表要插入行的位置
newRow.insertCell(-1)
.innerHTML = "<input type='checkbox' class='chk'/>";
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 = "<input type='checkbox' id='checkAll'/> 全选 <a href='javascript:del()'>删除</a>";
document.getElementById("checkAll")
.onclick = allCheck;
}
/*实现全选*/
function allCheck()
{
var res = document.getElementById("checkAll")
.checked;
var chks = document.getElementsByClassName("chk");
for (var i = 0; i < chks.length; i++)
{
//为所有复选框的选中状态赋值：把全选复选框的选中状态设置给他们
chks[i].checked = res;
}
}
/*实现删除*/
function del()
{
var chks = document.getElementsByClassName("chk");
for (var i = 0; i < chks.length; 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 < data.length; 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 = "<input type='checkbox'/> 全选 <a href='#'>删除</a>";
lastRow.appendChild(lasttd1);
}
</script> <
/head> <
body >
<div id="divTest" style="border:1px solid #ffd800; width:1000px;height:1200px;">
</div> <
/body> <
/html>
两种创建表格的方式你都了解了吗?更多javascript相关问题，请继续来奇Q工具网的常见问题栏目了解吧。
推荐阅读：