Question

javascript中checkbox 选中事件

每行中有一个checkbox复选框，当选中该复选框时，整行颜色变为黄色。代码：
function check(vi)//当选中时改变样式
{
if(vi.checked){
vi.parentNode.parentNode.style.backGrondColor="yellow";
}

}
在复选框中：
<tr>
<td>1</td>
<td><input type="checkbox" id="check1" onclick="check(this)"></td>
<td>01</td>
<td>职称</td>
<td>01</td>
<td>董事长</td>
<td>boss</td>
</tr>
为什么不变黄色，错在哪里？？

Answer 1

<script type="text/javascript">
function check(vi)//当选中时改变样式
{
if(vi.checked){
vi.parentNode.parentNode.className ="c";
}
}
</script>
<style type="text/css">
.c{ background-color:yellow;}
</style>

<table>
<tr>
<td>1</td>
<td><input type="checkbox" id="check1" onclick="check(this)"></td>
<td>01</td>
<td>职称</td>
<td>01</td>
<td>董事长</td>
<td>boss</td>
</tr>
</table>

也可以这么写 vi.parentNode.parentNode.style.background ="yellow";

Answer 2

vi.parentNode.parentNode.style.backGrondColor="yellow";
//这里面的一个单词写错了，才导致不显示颜色。
//把backGrondColor改成backgroundColor

追问

改成了backgroundColor还是不行。

Answer 3

vi.parentNode.parentNode.style.backgroundColor="yellow";

backgroundColor写错了

追问

改了还是不行

追答

可以的啊

function check(vi){
if(vi.checked){
vi.parentNode.parentNode.style.backgroundColor="yellow";
}
}

1

01
职称
01
董事长
boss

1

01
职称
01
董事长
boss

你测试下看

追问

我一开始设置了行的样式为蓝色，当把这条样式删掉就可以实现了，好奇怪，就不能开始是蓝色，当选中就变黄色吗？

追答

可以啊，你看下面的代码

function check(vi){
if(vi.checked){
vi.parentNode.parentNode.style.backgroundColor="yellow";
}
}

1

01
职称
01
董事长
boss

1

01
职称
01
董事长
boss