js常用的table操作
效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table常用操作</title>
<style type="text/css">
body {
text-align: center;
}
/* 设置表格居中 */
#ta {
margin: auto;
}
/* 设置表格的行样式 */
#ta tr {
height: 35px;
}
</style>
<script type="text/javascript">
//删除指定行
function delRow(btn) {
//获取table对象
var ta = document.getElementById("ta");
//获取要删除行的对象
var tr = btn.parentNode.parentNode;
//删除行
ta.deleteRow(tr.rowIndex);
}
//修改指定行
function updateRow(btn) {
//获取行对象
var tr = btn.parentNode.parentNode;
//获取列对象
var cell = tr.cells[4];
//判断cell.innerHTML的值是否是数字
if (!isNaN(Number(cell.innerHTML))) {
//修改单元格内容
cell.innerHTML = "<input type='text' value='" +
cell.innerHTML + "'οnblur='saveRow(this)'/>";
}
}
//保存修改行
function saveRow(inp) {
//获取单元格对象
var cell = inp.parentNode;
//实现保存
cell.innerHTML = inp.value;
}
//选择删除项
function chooseDel() {
//获取表格对象
var ta = document.getElementById("ta");
//获取要删除的行号
var chks = document.getElementsByName("chk");
for (var i = 1; i < chks.length; i++) {
if (chks[i].checked) {
//删除行
ta.deleteRow(i);
//多选时没删除一行行数会改变，这样在下标为i处找不到可删除的元素，减1即可
i--;
}
}
}
//添加指定行
function addRow() {
//获取table表格对象
var ta = document.getElementById("ta");
//添加行
var tr = ta.insertRow(1);
//添加单元格
var cell0 = tr.insertCell(0);
cell0.innerHTML = "<input type='checkbox' name='chk'/>";
var cell1 = tr.insertCell(1);
cell1.innerHTML = document.getElementById("uname").value;
var cell2 = tr.insertCell(2);
cell2.innerHTML = "孤尽、鸣莎";
var cell3 = tr.insertCell(3);
cell3.innerHTML = "75.20";
var cell4 = tr.insertCell(4);
cell4.innerHTML = "3";
var cell5 = tr.insertCell(5);
cell5.style.textAlign = "center";
cell5.innerHTML =
"<input type='button' value='修改数量' οnclick='updateRow(this)'/> <input type='button' value='删除' οnclick='delRow(this)'/>";
}
//复制行
function copyRow() {
//获取表格对象
var ta = document.getElementById("ta");
//获取选择行对象
var chks = document.getElementsByName("chk");
for (var i = 0; i < chks.length; i++) {
if (chks[i].checked) {
var tr = ta.insertRow(ta.rows.length);
//复制行
tr.innerHTML = ta.rows[i].innerHTML;
}
}
}
//全选与反选
function choose() {
var ck = document.getElementById("ck");
var chks = document.getElementsByName("chk");
//如果为选中状态则将所有框都变为选中状态
if (ck.checked) {
for (var i = 0; i < chks.length; i++) {
chks[i].checked = true;
}
} else {
for (var i = 0; i < chks.length; i++) {
chks[i].checked = false;
}
}
}
//隔行变色
function operCss() {
var trs = document.getElementById("ta").rows;
//遍历
for (var i = 0; i < trs.length; i++) {
if (i % 2 == 0) {
trs[i].style.backgroundColor = 'yellow';
} else {
trs[i].style.backgroundColor = "orange";
}
}
}
</script>
</head>
<body>
<h3 align="center">table常用操作</h3>
<input type="button" name="" id="" value="删除" onclick="chooseDel()" />
<input type="button" name="" id="" value="添加行" onclick="addRow()" />
<input type="button" name="" id="" value="复制行" onclick="copyRow()" />
<input type="button" name="" id="" value="隔行变色" onclick=" operCss()" />
书名：<input type="text" name="uname" id="uname" value="" />
<hr />
<table border="1px" id="ta">
<tr style="text-align: center;font-weight: bold;">
<td width="50px"><input type="checkbox" name="chk" id="ck" value="0" onclick="choose()" /></td>
<td width="200px">书名</td>
<td width="100px">作者</td>
<td width="100px">价格</td>
<td width="200px">购买数量</td>
<td width="200px">操作</td>
</tr>
<tr id="t1">
<td><input type="checkbox" name="chk" id="chk" value="0" /></td>
<td>Hadoop权威指南</td>
<td>Tom White</td>
<td>116.90</td>
<td>10</td>
<td align="center">
<input type="button" name="" id="" value="修改数量" onclick="updateRow(this)" />
<input type="button" name="" id="" value="删除" onclick="delRow(this)" />
</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="chk" value="1" /></td>
<td>快学Scala</td>
<td>Cay S.Horstmann</td>
<td> 82.00</td>
<td>2</td>
<td align="center">
<input type="button" name="" id="" value="修改数量" onclick="updateRow(this)" />
<input type="button" name="" id="" value="删除" onclick="delRow(this)" />
</td>
</tr>
<tr>
<td><input type="checkbox" name="chk" id="chk" value="2"></td>
<td>机器学习</td>
<td>周志华</td>
<td>61.60</td>
<td>7</td>
<td align="center">
<input type="button" name="" id="" value="修改数量" onclick="updateRow(this)" />
<input type="button" name="" id="" value="删除" onclick="delRow(this)" />
</td>
</tr>
</table>
</body>
</html>
