复选框与表格问题，谁帮我搞定？[高分]

修改了一下,去掉了对浏览器的兼容性,
希望还可以符合你的要求
在win2000 + ie6.0(或5.0)测试通过:_)<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head><body>
<script LANGUAGE="JavaScript">
var checkflag="false"; 
var theDefaultColor = '#ffffff';
var thePointerColor = '#ccffcc';
var theMarkColor = '#ffcc99';
function check() { 
for (var i=0;i<listNews.elements.length;i++) {
var Type=listNews.elements[i].type;
var name=listNews.elements[i].name;
if (Type=="checkbox" && name.indexOf('censor')!=-1) {

if (listNews.elements[i].checked) 
{
newColor = theDefaultColor;
} 
else 
{
newColor = theMarkColor;
}
var theCells = document.getElementById(i).cells;
var rowCellsCnt  = theCells.length;
for (c = 0; c < rowCellsCnt; c++)
{
theCells[c].style.backgroundColor = newColor;
} listNews.elements[i].checked=!listNews.elements[i].checked;
}
}
}
/**
 * Sets/unsets the pointer and er in browse mode
 *
 * @param   object    the table row
 * @param   interger  the row number
 * @param   string    the action calling this script (over, out or click)
 * @param   string    the default background color
 * @param   string    the color to use for mouseover
 * @param   string    the color to use for ing a row
 *
 * @return  boolean  whether pointer is set or not
 */
function setPointer(theRow, theRowNum, theAction)
{

// 3. Gets the current color...
var theCells = theRow.cells;
var rowCellsCnt  = theCells.length;
var currentColor = theCells[0].style.backgroundColor;
var newColor     = null; // 4. Defines the new color
// 4.1 Current color is the default one
if (currentColor == '' || currentColor.toLowerCase() == theDefaultColor.toLowerCase())
{
if (theAction == 'over' && thePointerColor != '')
{
newColor              = thePointerColor;
}
else if (theAction == 'click' && theMarkColor != '')
{
document.getElementsByTagName("input")[theRowNum].checked =!document.getElementsByTagName("input")[theRowNum].checked; newColor              = theMarkColor;
}
}
// 4.1.2 Current color is the pointer one
else if (currentColor.toLowerCase() == thePointerColor.toLowerCase() )
{
if (theAction == 'out')
{
newColor              = theDefaultColor;
}
else if (theAction == 'click' && theMarkColor != '')
{
document.getElementsByTagName("input")[theRowNum].checked =!document.getElementsByTagName("input")[theRowNum].checked; newColor              = theMarkColor;

}
}
// 4.1.3 Current color is the er one
else if (currentColor.toLowerCase() == theMarkColor.toLowerCase())
{
if (theAction == 'click')
{
document.getElementsByTagName("input")[theRowNum].checked =!document.getElementsByTagName("input")[theRowNum].checked;

newColor = (thePointerColor != '') ? thePointerColor : theDefaultColor;
}
} // end 4 // 5. Sets the new color...
if (newColor)
{
var c = null; for (c = 0; c < rowCellsCnt; c++)
{
theCells[c].style.backgroundColor = newColor;
} }  return true;
} // end of the 'setPointer()' function</script>
<form name="listNews" method="post" action="">
  <table width="760" border="1" cellspacing="0" cellpadding="0">
    <tr> 
      <td height="26" align="center" bgcolor="#CCCCCC" onClick="check()" style="cursor:hand">选择</td>
      <td colspan="2">&nbsp;</td>
    </tr>
    <tr onmouseover="setPointer(this, 0, 'over');" onmouseout="setPointer(this, 0, 'out');" onmousedown="setPointer(this, 0, 'click');" id="0"> 
      <td width="100" height="26" align="center"> <input type="checkbox" onClick="this.checked=!this.checked" name=censor[0] value=0></td>
      <td colspan="2">&nbsp;</td>
    </tr>
    <tr onmouseover="setPointer(this, 1, 'over');" onmouseout="setPointer(this, 1, 'out');" onmousedown="setPointer(this, 1, 'click');" id="1"> 
      <td width="100" height="26" align="center"> <input type="checkbox" onClick="this.checked=!this.checked" name=censor[1] value=0></td>
      <td colspan="2">&nbsp;</td>
    </tr>
    <tr onmouseover="setPointer(this, 2, 'over');" onmouseout="setPointer(this, 2, 'out');" onmousedown="setPointer(this, 2, 'click');" id="2"> 
      <td width="100" height="26" align="center"> <input type="checkbox" onClick="this.checked=!this.checked" name=censor[2] value=0></td>
      <td colspan="2">&nbsp;</td>
    </tr>
  </table>
</form>
</body>
</html>

解决方案 »

  1.   

    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    </head><body>
    <script LANGUAGE="JavaScript">
    function setCheck(){
    var e=event.srcElement,p=e.parentElement;
    if(e.tagName!='TR'){while(p.tagName!='TR')p=p.parentElement};
    if(e.tagName=="INPUT"){
    if(e.type=="checkbox"){
    p.bgColor=(e.checked?'#0066ff':'#ffffff')
    }
    }
    else{
    var t=document.listNews.all('censor'+(p.rowIndex - 1))
    t.checked=!t.checked;
    p.bgColor=(t.checked?'#0066ff':'#ffffff')
    }
    }

    function setOver(){
    var e=event.srcElement;
    while(e.tagName!='TR')e=e.parentElement;
    if(e.rowIndex!=0)e.bgColor='#666666';
    }

    function setOut(){
    var e=event.srcElement;
    while(e.tagName!='TR')e=e.parentElement;
    if(e.rowIndex!=0)e.bgColor=(document.listNews.all('censor'+(e.rowIndex - 1)).checked?'#0066ff':'#ffffff');
    }

    function selAll(e){
    for(var i=1;i<t1.rows.length;i++){
    t1.rows[i].bgColor=(e.checked?'#0066ff':'#ffffff');
    document.listNews.all('censor'+(i - 1)).checked=e.checked;
    }
    }
    </script>
    <form name="listNews" method="post" action="">
    Select All<input type="checkbox" name=censor onclick="selAll(this)">
      <table id="t1" width="760" border="1" cellspacing="0" cellpadding="0" onclick="setCheck()" onmouseover="setOver()" onmouseout="setOut()" style="cursor:hand">
        <tr> 
          <td height="26">??</td>
          <td colspan="2">&nbsp;</td>
        </tr>
        <tr> 
          <td width="100" height="26" align="center">
           <input type="checkbox" name=censor0 value=0></td>
          <td colspan="2">&nbsp;</td>
        </tr>
        <tr> 
          <td width="100" height="26" align="center"> <input type="checkbox" name=censor1 value=0></td>
          <td colspan="2">&nbsp;</td>
        </tr>
        <tr> 
          <td width="100" height="26" align="center"> <input type="checkbox" name=censor2 value=0></td>
          <td colspan="2">&nbsp;</td>
        </tr>
      </table>
    </form>
    </body>
    </html>
      

  2.   

    多谢月下小生，这正是我需要的  ^_^也谢谢liuzxit
      

  3.   

    新的问题如果ID不是从0开始的，比如随意一个数字都不行了 :(例如将月下小生的checkbox代码改为这样的
    ===================================================================<form name="listNews" method="post" action="">
      <table width="760" border="1" cellspacing="0" cellpadding="0">
        <tr> 
          <td height="26" align="center" bgcolor="#CCCCCC" onClick="check()" style="cursor:hand">选择</td>
          <td colspan="2">&nbsp;</td>
        </tr>
        <tr onmouseover="setPointer(this, 123, 'over');" onmouseout="setPointer(this, 123, 'out');" onmousedown="setPointer(this, 123, 'click');" id="123"> 
          <td width="100" height="26" align="center"> <input type="checkbox" onClick="this.checked=!this.checked" name=censor[0] value=0></td>
          <td colspan="2">&nbsp;</td>
        </tr>
        <tr onmouseover="setPointer(this, 1, 'over');" onmouseout="setPointer(this, 1, 'out');" onmousedown="setPointer(this, 1, 'click');" id="1"> 
          <td width="100" height="26" align="center"> <input type="checkbox" onClick="this.checked=!this.checked" name=censor[1] value=0></td>
          <td colspan="2">&nbsp;</td>
        </tr>
        <tr onmouseover="setPointer(this, 2, 'over');" onmouseout="setPointer(this, 2, 'out');" onmousedown="setPointer(this, 2, 'click');" id="2"> 
          <td width="100" height="26" align="center"> <input type="checkbox" onClick="this.checked=!this.checked" name=censor[2] value=0></td>
          <td colspan="2">&nbsp;</td>
        </tr>
      </table>
    </form>
    ===================================================================求救！
      

  4.   

    ID不是必须从零开始,但必须是字符串+有规律的数字组成,
    如myID1,myID2,myID3...
    修改函数check()中
    var theCells = document.getElementById(i).cells;
    ==>
    j = i+1;
    var theCells = document.getElementById("myID"+j).cells;或者,循环所有TR标记,第一行行为触发全选事件,后面所有行为可选择行
    j = i+1;
    document.getElementsByTagName("TR")[j].cells;
    :_)
      

  5.   

    是checkbox的name和值要规律还是tr的ID要规律这样就不太好做了我在写一个新闻的管理程序，默认情况下是有规律的，如果客户查询的话ID就不一定有规律了
      

  6.   

    ???
    checkbox的name与tr的ID要规律,但这个规律与后台数据无关
    1. RS或数组循环中,设置一变量,如Index=0
    2. 每循环一次,Index=Index+1
    3. checkbox的name可以是checkBox_Index,tr的ID是TrID_Index
    ...:_)
      

  7.   

    已经都设计好了，再改动就比较麻烦了checkbox name=censor[newsID] value=newsID我初学JS，不太明白，我想这样关于 checkbox部分按照原来设计的来做，tr部分是否 id等于newsID就可以了？呵呵，实在不好意思，还得麻烦你了 ^_^
      

  8.   

    TR行必须和checkbox相关联.
    建议修改:1. 修改函数check()中
    var theCells = document.getElementById(i).cells;
    var rowCellsCnt  = theCells.length;
    ==>
    var TrID = listNews.elements[i].TrID; '读取checkbox的TrID属性,获得tr行的id值
    var theCells = document.getElementById(TrID).cells;
    var rowCellsCnt  = theCells.length;2. 给checkbox增加TrID属性,TrID与tr的id值相等
    <input type="checkbox" onClick="this.checked=!this.checked" name=censor[0] value=0 >
    ==>
    <input type="checkbox" onClick="this.checked=!this.checked" name=censor[0] value=0 TrID="0">