DOM table对象

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

1. Table对象

属性：table.rows ：获得所有tr对象

方法：

var tr=table.insertRow([index]);

如果index不省略，会在index位置插入一行

省略index，在table结尾追加一个新行

table.deleteRow(index); 删除index位置的行

强调：删除行只能用行下标

TableRow对象

属性：tr.cells : 获取当前行中所有td

tr.rowIndex : 获得当前tr在table中的位置下标

方法：

var td=tr.insertCell(index);

强调：只能创建td元素

tr.deleteCell(index); 删除格，必须用下标

TableCell对象

属性：td.cellIndex : 获得td在当前行中的位置下标

警告与确认的比较：

警告：alert("xxx")，只能选择确定

确认：confirm("xxx")，两个按钮：确定和取消

如果点确定，返回true，否则返回false

例如:

<!DOCTYPE HTML>
<html>
<head>
<title>动态操作表格</title>
<meta charset="utf-8" />
<style>
table{width:500px; border-collapse:collapse;
text-align:center;
}
td,th{border:1px solid #ccc}
</style>
<script>
var data='[{"id":1001,"name":"非常可乐","price":2.5,"count":3000},{"id":1003,"name":"果粒橙","price":2.5,"count":5000},{"id":1011,"name":"芬达","price":2.3,"count":1000}]';
//本地用eval将data解析为js中的数组或对象
var products=eval("("+data+")");
console.log(products.length);
window.onload=function(){
//加载表头
//创建空data元素,保证存在table中
var table=document.createElement("table");
var thead=document.createElement("thead");
table.appendChild(thead);
var tr=thead.insertRow();
for(var key in products[0]){
var th=document.createElement("th");
th.innerHTML=key;
tr.appendChild(th);
}//添加完属性表头后,单独添加操作表头
var th=document.createElement("th");
tr.appendChild(th);
th.innerHTML="操作行";
//创建表头下面的主题
tbody=document.createElement("tbody");
table.appendChild(tbody);
for(var i=0;i<products.length;i++){//遍历外层数组
var tr=tbody.insertRow();
for(var key in products[i]){//遍历内层关联数组
var td=tr.insertCell();//每遍历关联数组一行,创建一列
td.innerHTML=products[i][key];//将每个值压入列中
}
var td=tr.insertCell();
var btn=document.createElement("button");
btn.innerHTML="删除";
td.appendChild(btn);
/*为按钮动态绑定事件*/
btn.onclick=function(){//this-->btn
var tr=this.parentNode.parentNode;
//找到this所在行中第2个cell
var pname=tr.cells[1].innerHTML;
if(confirm("是否删除 "+pname+" ?")){
table.deleteRow(tr.rowIndex);
}
}
//将table追加到id为data的div元素下
document.getElementById("data").appendChild(table);
}
}
</script>
</head>
<body>
<!--<button onclick="createTable()">创建表格</button>
<button onclick="fillData()">加载数据</button>-->
<div id="data"></div>
</body>
</html>