有关js、jquery操作table的例子

最新推荐文章于 2019-02-23 18:13:02 发布

mingqingchangcheng

最新推荐文章于 2019-02-23 18:13:02 发布

阅读量422

点赞数 1

分类专栏： js jquery table 文章标签： jquery table 选取

本文链接：https://blog.csdn.net/mingqingchangcheng/article/details/51008452

版权

js jquery table 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type="text/javascript" src='js/jquery-1.8.3.js'></script>
<style type="text/css">
#mask {
position: absolute;
background-color:#c0c0c0;
z-index: 100;
width: 100%;
height: 100%;
opacity:0.5;
display: none;
}

</style>
</head>
<body>

<div id="mask"></div>

<form method="post" action="">
<input id="name" type="text">
<input type="button" value="遮罩" οnclick="doZhe()">
</form>
<table height="500px" width="600px">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script type="text/javascript">
$("#name").val("hehe");
//遮罩方法
function doZhe(){

$("#mask").css("display","block");
setTimeout(function(){
$("#mask").css("display","none");
},3000);

}
$("tr:even").css("background-color","black");
$("tr:odd").css("background-color","yellow");
var tr1=$("tr:even").children();//取出一个表格的偶数行下的td
console.log(tr1 instanceof jQuery);//是否是jquery对象
//console.log(tr1.length);

var tr2=$("tr:odd").children();//取出一个表格的技术行下的td
var treven=[];
for(var x=0;x<tr1.length;x++){
treven.push(tr1[x]);
}
var trodd=[];
for(var x=0;x<tr2.length;x++){
trodd.push(tr2[x]);
}
//由于使用循环取出的不是jquery对象，所以下面判断的时候不能用inArray方法
$("td").mouseover(function(){
$(this).css("background-color","blue").next().css("background-color","green");
});
$("td").mouseout(function(){
var res=$.inArray(treven,$(this)[0]);
var res2=treven.indexOf($(this)[0]);
//console.log($(this));
//console.log(treven);
console.log(res);console.log(res2);

if(treven.indexOf($(this)[0])>=0){//判断的是dom元素，所以用的是indexOf
$(this).css("background-color","black").next().css("background-color","black");
return;
}
if(trodd.indexOf($(this)[0])>=0){
$(this).css("background-color","yellow").next().css("background-color","yellow");
return;
}
});
</script>
</body>
</html>

mingqingchangcheng

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
有关js、jquery操作table的例子

Document #mask { position: absolute;background-color:#c0c0c0; z-index: 100; width: 100%; height: 100%;opacity:0.5; display: none; } backgrou
复制链接

扫一扫