表格对象的rows属性可获得所有的行对象。
行对象的cells属性可获得所有的列对象。
删除行对象：
//获取行对象的角标 行对象.rowIndex；
//通过角标删除行对象 表格对象.deleteRow(角标)；
例子：
实现了：
1、使用行内按钮删除行。
2、使用选择框删除选中的行。
3、修改指定的列值。
4、新增一行数据。
5、通过复制选中的行，新增行数据。
6、隔行变色。
效果图：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>操作表格</title>
<!--样式-->
<style type="text/css">
table {
margin: 20px auto;
width: 650px;
}
tr {
height: 30px;
text-align: center;
}
</style>
<!--js代码域-->
<script type="text/javascript">
//反选按钮
function chooseAll() {
//获取表格对象
var tab = document.getElementById('tab');
//获取第一行
var tr1 = tab.rows[0];
//获取第一列
var td1 = tr1.cells[0];
//获取反选按钮
var button = td1.childNodes[0];
//遍历所有选择框
for (var i = 1; i < tab.rows.length; i++) {
//获取选择框
var temp=tab.rows[i].cells[0].childNodes[0];
//如果被选中
if (temp.checked) {
temp.checked = false;
} else {
//没有被选中
temp.checked = true;
}
}
}
//删除选中行
function delChoose(){
//
var table = document.getElementById('tab');
//获取所有的选择框
var checkboxs = document.getElementsByName("choose");
//查看状态
for(var i=0;i<checkboxs.length;i++){
if(checkboxs[i].checked){
table.deleteRow(checkboxs[i].parentNode.parentNode.rowIndex);
//删除一个后length会-1，为保证正确性，i也需要-1.
i--;
}
}
}
//通过按钮删除行
function delRow(btn) {
//获取table元素
var tab = document.getElementById("tab")
//获取要删除的行对象
var tr = btn.parentNode.parentNode;
//删除行
tab.deleteRow(tr.rowIndex);
}
//修改列内容：数量
function updateRow(btn) {
//获取单元格所在行对象
var tr = btn.parentNode.parentNode;
//获取单元格对象
var td = tr.cells[5];
//判断是否为数字
if (!isNaN(td.innerHTML)) {
//修改内容
td.innerHTML = "<input type='text' style='width: 40px' value='" + td.innerHTML +
"' onblur='updateRow2(this)'>";
}
}
function updateRow2(inp) {
//获取单元格对象
var td = inp.parentNode;
//修改内容
if (isNaN(inp.value)) {
inp.value = "值错误";
inp.style.backgroundColor = 'aquamarine';
} else {
td.innerHTML = inp.value;
}
}
//新增行
function addRow(){
//获取表格
var table = document.getElementById('tab');
//添加行
var new_tr = table.insertRow(1);
//添加单元格
var cell0 = new_tr.insertCell(0);
var cell1 = new_tr.insertCell(1);
var cell2 = new_tr.insertCell(2);
var cell3 = new_tr.insertCell(3);
var cell4 = new_tr.insertCell(4);
var cell5 = new_tr.insertCell(5);
var cell6 = new_tr.insertCell(6);
//填入内容
cell0.innerHTML="<td><input type='checkbox' name='choose'></td>";
cell1.innerHTML="<input style='width: 150px' type='text' onblur='addRow2(this,1)'>";
cell2.innerHTML="<input style='width: 50px' type='text' onblur='addRow2(this,2)'>";
cell3.innerHTML="<input style='width: 150px' type='text' onblur='addRow2(this,3)'>";
cell4.innerHTML="<input style='width: 50px' type='text' onblur='addRow2(this,4)'>";
cell5.innerHTML="<input style='width: 50px' type='text' onblur='addRow2(this,5)'>";
cell6.innerHTML="<div style='width: 150px'><input type='button' value='修改数量' onclick='updateRow(this)'> <input type='button' value='删除' onclick='delRow(this)'></div>";
}
function addRow2(inp,index){
//获取单元格对象
var td=inp.parentNode;
//判断数量和价格是否合法
if(index==4||index==5){
if(isNaN(inp.value)){
inp.value = "值错误";
inp.style.backgroundColor = 'aquamarine';
}else{
td.innerHTML=inp.value;
}
}else{
td.innerHTML=inp.value;
}
}
//新增行：使用选中行
function copyRows(){
//获取table对象
var table=document.getElementById('tab');
//获取所有的选择框
var checkboxs = document.getElementsByName("choose");
//遍历选则框
for(var i=0;i<checkboxs.length;i++){
//框是否被选中
if(checkboxs[i].checked){
//获取被选中的行
var old_tr = table.rows[i+1];
//在尾部位置插入新行
var new_tr = table.insertRow(table.rows.length);
new_tr.innerHTML = old_tr.innerHTML;
//如果是在头部插入，则需要添加这句代码，可避免进入死循环，为什么？
//old_tr.innerHTML = old_tr.innerHTML;
}
}
}
//设置表格隔行变色
function operCss(){
//获取所有行
var rows = document.getElementById('tab').rows;
//隔行设置属性
for(var i=1;i<rows.length;i++){
if(i%2==0){
rows[i].style.backgroundColor="red";
}else{
rows[i].style.backgroundColor="green";
}
}
}
</script>
</head>
<body>
<div style="width: 300px; margin: 10px auto;">
<button onclick="delChoose()">删除选中</button>
<button onclick="addRow()">新增行</button>
<button onclick="copyRows()">复制所选</button>
<button onclick="operCss()">隔行变色</button>
</div>
<table id='tab' border="1px">
<tr style="text-align: center;font-weight: bold;">
<td><input type="button" onclick="chooseAll()" value="反选"></td>
<td width=150px>书名</td>
<td width=50px>作者</td>
<td width=150px>描述</td>
<td width=50px>价格</td>
<td width=50px>数量</td>
<td width=150px>管理</td>
</tr>
<tr>
<td><input type="checkbox" name="choose"></td>
<td>《平凡的世界(1)》</td>
<td>路遥</td>
<td>好看的嘞！</td>
<td>9.9</td>
<td>3</td>
<td><input type="button" value="修改数量" onclick="updateRow(this)"> <input type="button" value="删除" onclick="delRow(this)"></td>
</tr>
<tr>
<td><input type="checkbox" name="choose"></td>
<td>《平凡的世界(2)》</td>
<td>路遥</td>
<td>好看的嘞！</td>
<td>19.9</td>
<td>1</td>
<td><input type="button" value="修改数量" onclick="updateRow(this)"> <input type="button" value="删除" onclick="delRow(this)"></td>
</tr>
<tr>
<td><input type="checkbox" name="choose"></td>
<td>《平凡的世界(3)》</td>
<td>路遥</td>
<td>好看的嘞！</td>
<td>29.9</td>
<td>6</td>
<td><input type="button" value="修改数量" onclick="updateRow(this)"> <input type="button" value="删除" onclick="delRow(this)"></td>
</tr>
</table>
</body>
</html>
View Code
标签：13,表格,tr,inp,innerHTML,JS,tab,var,new From： https://www.cnblogs.com/lurenjia-bky/p/17069038.html