html表格⿏标变⾊,JS⿏标移动换⾊表格⾏变⾊点击按钮控制表格是否开启⿏标经过隔⾏换⾊,代码如下:
1.表格应⽤:隔⾏变⾊、移⼊变⾊-Javascript005-表格应⽤、提取、添加、删除
var table = ElementsByTagName('table')[0];
var btn = ElementsByTagName('button');
btn[0].onclick = function() { //⽼⽅法提取内容
var lisi = ElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td') [1].innerHTML;
alert(lisi);
};
btn[1].onclick = function() { //新⽅法提取内容
//tBodies 集合返回表格
元素的集合。
//rows 集合返回表格中所有⾏(TableRow 对象)的⼀个数组,即⼀个 HTMLCollection。该集合包括 、
和 中定义的所有⾏。
//cells 集合返回表格中所有
或 元素。
html表格元素
var zhangsan = table.tBodies[0].rows[0].cells[1].innerHTML;
alert(zhangsan);
};
btn[2].onclick = function() { //开启关闭隔⾏变⾊
if (btn[2].innerHTML == '开启隔⾏变⾊') {
table.setAttribute('class', 'table table-bordered table-striped');
btn[2].style.background = 'red';
btn[2].innerHTML = '关闭隔⾏变⾊';
} else {
table.setAttribute('class', 'table table-bordered');
btn[2].style.background = '#5bc0de';
btn[2].innerHTML = '开启隔⾏变⾊';
}
};
btn[3].onclick = function() { //开启关闭移⼊变⾊
if (btn[3].innerHTML == '开启移⼊变⾊') {
btn[3].style.background = 'red';
btn[3].innerHTML = '关闭移⼊变⾊';
for (var i = 0; i < table.tBodies[0].rows.length; i++) { table.tBodies[0].rows[i].οnmοuseοver=function(){ this.style.background='yellow';
};
table.tBodies[0].rows[i].οnmοuseοut=function(){ this.style.background='';
}
}
} else if(btn[3].innerHTML == '关闭移⼊变⾊'){
btn[3].style.background = '#5bc0de';
btn[3].innerHTML = '开启移⼊变⾊';
}
}
}
表格应⽤:隔⾏变⾊、移⼊变⾊
⽼⽅法提取“李四”单元格
新⽅法提取“张三”单元格
开启隔⾏变⾊
开启移⼊变⾊
ID姓名年龄
1张三332李四443王五554赵六665homejoy33
为什么,我的代码点击关闭之后,依然是⿏标经过可以变⾊?

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。