您的位置：首页 > Web前端 > JavaScript

JavaScript操作表格

2016-12-15 10:45 267 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Adding and Removing Elements</title>
<style>
table{
border-collapse: collapse;
}
td,th{
padding: 5px;
border: 1px solid #cccccc;
}
/*奇数行*/
tr:nth-child(2n+1){
background-color: #eeffee;
}
/*偶数行*/
tr:nth-child(2n){
background-color: #8843ff;
}
</style>
</head>
<body>
<table id="mixed">
<tr>
<th>Value One</th>
<th>Value Two</th>
<th>Value Three</th>
</tr>
</table>
<div id="result"></div>
<div>
<h3>从HTML表格删除行</h3>
<h5>添加并删除表格行及其相关单元格和数据</h5>
</div>
<script>
var values = new Array(6);
values[0] = [123.45,"apple",true];
values[1] = [65,"bababa",false];
values[2] = [1034.99,"cherry",false];
values[3] = [534.99,"shawn",false];
values[4] = [10.99,"Khea",false];
values[5] = [164.99,"Todd",false];

var mixed = document.getElementById("mixed");
var tbody = document.createElement("tbody");  //创建一个元素

//针对每个外围数组行
for(var i = 0; i < values.length; i++){
var tr = document.createElement("tr");

//针对每个内部数组单元格，创建td, 然后附加文本
for(var j = 0; j < values[i].length; j++){
var td = document.createElement("td"); //创建单元格，列
var txt = document.createTextNode(values[i][j]);
td.appendChild(txt);
tr.appendChild(td);
}

//绑定事件处理程序
tr.onclick = prunerow;

//把行附加到表
tbody.appendChild(tr);
mixed.appendChild(tbody);
}

function prunerow(){
//删除行
var parent = this.parentNode;//获取单元格的行
var oldrow = parent.removeChild(this);  //删除行

//来自删除行的数据的dataString
var dataString = "";
/**
* 取出行中的数据
*/
for(var i = 0; i < oldrow.childNodes.length; i++){
var cell = oldrow.childNodes[i];
console.log(cell);
dataString += cell.firstChild.data + " ";
}

//输出消息
var msg = document.createTextNode("removed " + dataString);
var p = document.createElement("p");
p.appendChild(msg);
document.getElementById("result").appendChild(p);
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航