用JavaScript实现全选，批量删除，还有鼠标悬浮在信息上时变色（光棒效果）等...

最新推荐文章于 2024-07-25 09:24:40 发布

choucai3595

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量107

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3841968/blog/1811525

版权

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

table{

border:"0" ;

width:"400";

padding: 0 auto;

}

tr{

text-align: center;

}

</style>

window.οnlοad=function(){

//获取页面上所有的tr

var trs=document.getElementsByTagName('tr');

//遍历所有tr数组

for (var i = 1; i < trs.length; i++) {

var thetr=trs[i];

var oldcolor;

//给第i行绑定鼠标移上去的事件

thetr.οnmοuseοver=function(){

oldcolor=this.style.background;//将原来的颜色保存一下，以便恢复

this.style.background='#f1f1f1';//修改当前所处位置的颜色

}

//鼠标离开时恢复原来颜色

thetr.οnmοuseοut=function(){

this.style.background=oldcolor;//当前颜色等于原来颜色

}

//给a添加click事件执行删除单行功能

var yihang=document.getElementsByTagName('a');

for (var i = 0; i < yihang.length; i++) {

var yh=yihang[i];

yh.οnclick=function(){

var delnode=this.parentNode.parentNode;//父节点的父节点

var pnode=delnode.parentNode;

pnode.removeChild(delnode);

}

function allstu(gou){//点中全选所有信息将被选中

var list=document.getElementsByName("xuan");

for (var i = 0; i < list.length; i++) {

var check=list[i];

check.checked=gou.checked;

}

</script>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

//批量删除所选择的

function delxuan(){

var checkxuan=document.getElementsByName('xuan');//获取页面所有复选框name=xuan

for (var i = checkxuan.length-1; i >= 0; i--) {

var ckx=checkxuan[i];

if (ckx.checked==true) {

deltr=ckx.parentNode.parentNode;

pnode=deltr.parentNode;

pnode.removeChild(deltr);

}

</script>

</body>

< /html>

转载于:https://my.oschina.net/u/3841968/blog/1811525

choucai3595

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用JavaScript实现全选，批量删除，还有鼠标悬浮在信息上时变色（光棒效果）等...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ...
复制链接

扫一扫