以下是原代码.
可以实现点击aaa行时
aaa复选框自动选中,aaa行表格变黄色,bbb行所有不变点击bbb行时
bbb复选框自动选中,bbb行表格变黄色,aaa行还是黄色
(也即是用黄色可以显示多行)现在我想点击aaa,bbb行的时候复选框不选中,
点击aaa行变黄色,bbb行白色,点击bbb行的时候bbb行变黄色,aaa行是白色
(也即是用黄色只显示一行)
代码该如何改?<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>dhtml.table.changeTrBgColor.html</title></head><body>
<h3> </h3>
<table width="896" height="61" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="280">
<input type="checkbox" name="cbxGroup" value="checkbox" />
<label>aaa</label></td>
<td width="304"> </td>
<td width="304"> </td>
</tr>
<tr>
<td>
<input type="checkbox" name="cbxGroup" value="checkbox" />
<label>bbb</label></td>
<td> </td>
<td> </td>
</tr>
</table>
<br />
</body>
<script type="text/javascript">
<!--var aCbx = document.getElementsByName("cbxGroup");
var oTr;
for (var i=0; i<aCbx.length; i++)
{
oTr = aCbx[i].parentNode.parentNode; // 鼠标经过表格,表格变红色,鼠标离开,表格白色.
oTr.onmouseover = function()
{ this.style.backgroundColor = "pink";
};
oTr.onmouseout = function()
{
this.style.backgroundColor = "white";
}; // 鼠标点击表格,复选框选中,表格变蓝色。
// 鼠标离开后,表格还是蓝色。再次点击表格,复选框不选中,表格变为鼠标经过时的红色。
oTr.checkBox = aCbx[i];
oTr.onclick = function()
{
with (this)
{
checkBox.checked = !checkBox.checked; if (checkBox.checked)
{
style.backgroundColor = "yellow";
fpMouseover = onmouseover;
onmouseover = null;
fpMouseout = onmouseout;
onmouseout = null;
}
else
{
style.backgroundColor = "pink";
onmouseover = fpMouseover;
onmouseout = fpMouseout;
}
}
}; aCbx[i].onclick = function()
{ this.checked = !this.checked;
};
}
//-->
</script>
</html>
可以实现点击aaa行时
aaa复选框自动选中,aaa行表格变黄色,bbb行所有不变点击bbb行时
bbb复选框自动选中,bbb行表格变黄色,aaa行还是黄色
(也即是用黄色可以显示多行)现在我想点击aaa,bbb行的时候复选框不选中,
点击aaa行变黄色,bbb行白色,点击bbb行的时候bbb行变黄色,aaa行是白色
(也即是用黄色只显示一行)
代码该如何改?<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>dhtml.table.changeTrBgColor.html</title></head><body>
<h3> </h3>
<table width="896" height="61" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="280">
<input type="checkbox" name="cbxGroup" value="checkbox" />
<label>aaa</label></td>
<td width="304"> </td>
<td width="304"> </td>
</tr>
<tr>
<td>
<input type="checkbox" name="cbxGroup" value="checkbox" />
<label>bbb</label></td>
<td> </td>
<td> </td>
</tr>
</table>
<br />
</body>
<script type="text/javascript">
<!--var aCbx = document.getElementsByName("cbxGroup");
var oTr;
for (var i=0; i<aCbx.length; i++)
{
oTr = aCbx[i].parentNode.parentNode; // 鼠标经过表格,表格变红色,鼠标离开,表格白色.
oTr.onmouseover = function()
{ this.style.backgroundColor = "pink";
};
oTr.onmouseout = function()
{
this.style.backgroundColor = "white";
}; // 鼠标点击表格,复选框选中,表格变蓝色。
// 鼠标离开后,表格还是蓝色。再次点击表格,复选框不选中,表格变为鼠标经过时的红色。
oTr.checkBox = aCbx[i];
oTr.onclick = function()
{
with (this)
{
checkBox.checked = !checkBox.checked; if (checkBox.checked)
{
style.backgroundColor = "yellow";
fpMouseover = onmouseover;
onmouseover = null;
fpMouseout = onmouseout;
onmouseout = null;
}
else
{
style.backgroundColor = "pink";
onmouseover = fpMouseover;
onmouseout = fpMouseout;
}
}
}; aCbx[i].onclick = function()
{ this.checked = !this.checked;
};
}
//-->
</script>
</html>
解决方案 »
- 自己做的一个跟随滚动的代码,求拍砖!
- JS代码冲突,求高手帮忙
- 弹出的对话框不带有网页的边框且不被浏览器所阻止那位高手在帮帮
- 这句话为什么执行不了
- javascript如何判断数组内元素是否重复?
- 高分求一列表框脚本,快快快!!!!
- javascript:history.back(-2);为什么没有用?
- 在网页上使用<SCRIPT src="xxx.js">就提示找不到对象,把xxx.js里的内容都写到网页上就没有问题!
- 为什么js的函数在html中能直接调用,而php,asp等都要在<??>或<%%>中进行呢?
- iframe编辑器,如果获取鼠标选择的内容,如果是图片,如果获取图片的src的值
- 怎样刷新页面的部份内容
- RMB求解决方法!判断用户点击GG广告一次!就隐藏这个广告单元(隐藏包含这个广告的DIV)
<head>
<title>dhtml.table.changeTrBgColor.html </title></head><body>
<h3> </h3>
<table width="896" height="61" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="280">
<input type="checkbox" name="cbxGroup" value="checkbox" />
<label>aaa </label>
1</td>
<td width="304"> </td>
<td width="304"> </td>
</tr>
<tr>
<td>
<input type="checkbox" name="cbxGroup" value="checkbox" />
<label>bbb </label>
2</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td width="280">
<input type="checkbox" name="cbxGroup" value="checkbox" />
<label>aaa </label>
3</td>
<td width="304"> </td>
<td width="304"> </td>
</tr>
<tr>
<td>
<input type="checkbox" name="cbxGroup" value="checkbox" />
<label>bbb </label>
4</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td width="280">
<input type="checkbox" name="cbxGroup" value="checkbox" />
<label>aaa </label>
5</td>
<td width="304"> </td>
<td width="304"> </td>
</tr>
<tr>
<td>
<input type="checkbox" name="cbxGroup" value="checkbox" />
<label>bbb </label>
6</td>
<td> </td>
<td> </td>
</tr>
</table>
<br />
</body>
<script type="text/javascript">
<!--var aCbx = document.getElementsByName("cbxGroup");
var oTr;
for (var i=0; i <aCbx.length; i++){
oTr = aCbx[i].parentNode.parentNode; // 鼠标经过表格,表格变红色,鼠标离开,表格白色.
oTr.onmouseover = function(){
this.style.backgroundColor = "pink";
};
oTr.onmouseout = function(){
this.style.backgroundColor = "white";
};
oTr.fpMouseover=oTr.onmouseover;
oTr.fpMouseout=oTr.onmouseout;
// 鼠标点击表格,复选框选中,表格变蓝色。
// 鼠标离开后,表格还是蓝色。再次点击表格,复选框不选中,表格变为鼠标经过时的红色。
oTr.checkBox = aCbx[i];
oTr.onclick = function(){
//将触本行外所有选中项清除选中
var oTrs=this.parentNode.rows;
for(var i=0,nLen=oTrs.length;i<nLen;i++){
if(oTrs[i]!=this){
oTrs[i].checkBox.checked=false;
oTrs[i].style.backgroundColor="white";
oTrs[i].onmouseover = oTrs[i].fpMouseover;
oTrs[i].onmouseout = oTrs[i].fpMouseout;
}
}
with (this){
checkBox.checked = !checkBox.checked;
if (checkBox.checked){
style.backgroundColor = "yellow";
fpMouseover = onmouseover;
onmouseover = null;
fpMouseout = onmouseout;
onmouseout = null;
}
else{
style.backgroundColor = "pink";
onmouseover = fpMouseover;
onmouseout = fpMouseout;
}
}
}; aCbx[i].onclick = function(){
this.checked = !this.checked;
};
}
//-->
</script>
</html>
就是行选中后复选框不选中.
<head>
<title>dhtml.table.changeTrBgColor.html </title> </head> <body>
<h3> </h3>
<table width="896" height="61" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="280">
<input type="checkbox" name="cbxGroup" value="checkbox" />
<label>aaa </label>
1 </td>
<td width="304"> </td>
<td width="304"> </td>
</tr>
<tr>
<td>
<input type="checkbox" name="cbxGroup" value="checkbox" />
<label>bbb </label>
2 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td width="280">
<input type="checkbox" name="cbxGroup" value="checkbox" />
<label>aaa </label>
3 </td>
<td width="304"> </td>
<td width="304"> </td>
</tr>
<tr>
<td>
<input type="checkbox" name="cbxGroup" value="checkbox" />
<label>bbb </label>
4 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td width="280">
<input type="checkbox" name="cbxGroup" value="checkbox" />
<label>aaa </label>
5 </td>
<td width="304"> </td>
<td width="304"> </td>
</tr>
<tr>
<td>
<input type="checkbox" name="cbxGroup" value="checkbox" />
<label>bbb </label>
6 </td>
<td> </td>
<td> </td>
</tr>
</table>
<br />
</body>
<script type="text/javascript">
<!--var aCbx = document.getElementsByName("cbxGroup");
var oTr;
var oTrselect;
for (var i=0; i<aCbx.length; i++)
{
oTr = aCbx[i].parentNode.parentNode; // 鼠标经过表格,表格变红色,鼠标离开,表格白色.
oTr.onmouseover = function()
{
this.style.backgroundColor = "E8F9FF";
};
oTr.onmouseout = function()
{
this.style.backgroundColor = "white";
}; // 鼠标点击表格,复选框选中,表格变蓝色。
// 鼠标离开后,表格还是蓝色。再次点击表格,复选框不选中,表格变为鼠标经过时的红色。
oTr.checkBox = aCbx[i];
oTr.onclick = function()
{
var oTrs=this.parentNode.rows;
for(var i=0,nLen=oTrs.length;i <nLen;i++){
if(oTrs[i]!=this){ oTrs[i].style.backgroundColor="white"; }
}
with (this)
{ style.backgroundColor = "#FFFDD7";
fpMouseover = onmouseover;
onmouseover = null;
fpMouseout = onmouseout;
onmouseout = null;
} };
}
//-->
</script>
</html>