javascript 双击选中tr（行）变背景颜色

JavaScript023

javascript 双击选中tr（行）变背景颜色,第1张

str += "<tr ondblclick='changebgColor(this)'>" //行循环增加双击事件

//js方法

<script type="text/javascript" language="javascript">

function changebgColor(obj){

if(obj.bgColor=="#FF0000") obj.bgColor =""

else obj.bgColor="#FF0000"//双击变色,再双击变回

//也可以通过obj.style.backgroundColor="#FF0000"这样来设置，一个是通过属性来设置，一个是通过样式来设置

}

</script>

1、首先我们来创建一个p元素，在里面写上hello:。

2、在浏览器界面上的显示如下。

3、接下来我们就为这个p元素来设置背景颜色。

4、接下来看看浏览器中变化。

5、说明我们就已经为p元素改好了背景色，如果要改变颜色的话直接在后面改就好。

使用jquery的伪类选择器，例如

$("选择器 :odd").css("background","#0f0")//奇数行

$("选择器 :even").css("background","#ff0")//偶数行

若是用原生js就要判断，例如

for(var i = 0i <元素行数i++){

if(i%2 == 0){

//奇数行代码

}else{

//偶数行代码

}

}

而且用css也可以添加奇偶数行的样式，例如元素为tr的奇偶设置

tr:nth-child(odd){background:#0f0}

tr:nth-child(even){background:#ff0}

nth-of-type伪类选择器也能实现此效果。