javascript中整行整列选取问题

var oTable = document.getElementById("table");
var iRowCount = oTable.rows.length;
var iCellCount = oTable.rows[0].cells.length;
得到行数和列数以后循环每列/行

解决方案 »

  1.   

    <table width="300" border="1" cellspacing="1" cellpadding="1">
    <tr><td width="3%" align="center">&nbsp;</td>
    <td width="3%" align="center">Line1</td>
    <td width="3%" align="center">Line2</td>
    <td width="3%" align="center">Line3</td>
    </tr>
    <tr>
    <td>Row1</td>
    <td align="center"><input type="checkbox" name="rowline[1][1]" value="11" /></td>
    <td align="center"><input type="checkbox" name="rowline[1][2]" value="12" /></td>
    <td align="center"><input type="checkbox" name="rowline[1][3]" value="13"/></td>
    </tr>
    <tr>
    <td>Row2</td>
    <td align="center"><input type="checkbox" name="rowline[2][1]" value="21" /></td>
    <td align="center"><input type="checkbox" name="rowline[2][2]" value="22" /></td>
    <td align="center"><input type="checkbox" name="rowline[2][3]" value="23"/></td>
    </tr>
    <tr>
    <td>Row3</td>
    <td align="center"><input type="checkbox" name="rowline[3][1]" value="31" /></td>
    <td align="center"><input type="checkbox" name="rowline[3][2]" value="32" /></td>
    <td align="center"><input type="checkbox" name="rowline[3][3]" value="33"/></td>
    </tr>
    </table>要实现的就是：
    点击行头或列头里的文字，全选或全取消相应的整行/整列的CHECKBOX
      比如，点击Line1，则选中Line1所在列的纵向所有checkbox，再点一次，点全取消该列状态。
            点击Row1,则选中Row1所在行的横向所有checkbox,再点一次，则全取消该行状态。谢谢各位了！
      

  2.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    </head><body>
    <table width="300" border="1" cellspacing="1" cellpadding="1" id="targetTable"> 
    <tr> <td width="3%" align="center">&nbsp; </td> 
    <td width="3%" align="center"   onclick="SelectCbx(0,1,this)">Line1 </td> 
    <td width="3%" align="center"   onclick="SelectCbx(0,2,this)">Line2 </td> 
    <td width="3%" align="center"   onclick="SelectCbx(0,3,this)">Line3 </td> 
    </tr> 
    <tr> 
    <td  onclick="SelectCbx(1,0,this)">Row1 </td> 
    <td align="center"> <input type="checkbox" name="rowline[1][1]" value="11" /> </td> 
    <td align="center"> <input type="checkbox" name="rowline[1][2]" value="12" /> </td> 
    <td align="center"> <input type="checkbox" name="rowline[1][3]" value="13"/> </td> 
    </tr> 
    <tr> 
    <td onclick="SelectCbx(2,0,this)">Row2 </td> 
    <td align="center"> <input type="checkbox" name="rowline[2][1]" value="21" /> </td> 
    <td align="center"> <input type="checkbox" name="rowline[2][2]" value="22" /> </td> 
    <td align="center"> <input type="checkbox" name="rowline[2][3]" value="23"/> </td> 
    </tr> 
    <tr> 
    <td  onclick="SelectCbx(3,0,this)">Row3 </td> 
    <td align="center"> <input type="checkbox" name="rowline[3][1]" value="31" /> </td> 
    <td align="center"> <input type="checkbox" name="rowline[3][2]" value="32" /> </td> 
    <td align="center"> <input type="checkbox" name="rowline[3][3]" value="33"/> </td> 
    </tr> 
    </table> 
    <script type="text/javascript">
    function SelectCbx(x,y,t){
    t.selState=t.selState?false:true;
    var table=document.getElementById("targetTable");
    for(var i=1;i<table.rows.length;i++){
    if(x==0){
    table.rows[i].cells[y].getElementsByTagName("input")[0].checked=t.selState;
    }
    else if(i==x){
    for(var j=1;j<table.rows[i].cells.length;j++){
    table.rows[i].cells[j].getElementsByTagName("input")[0].checked=t.selState;
    }
    }
    }
    }
    </script>
    </body>
    </html>
      

  3.   

    L@_@K
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title>dhtml.table.selectRowOrColumnCheckboxes.html</title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="[email protected]" />
      <meta name="keywords" content="dhtml js csdn" />
      <meta name="description" content="for csdn.net" />
      <style type="text/css">
    .hand
    {
    cursor: hand;
    }
    table
    {
    background-color: white;
    }
    td
    {
    font-family: "Courier New";
    }
      </style>
     </head> <body>
    <table id="tbeTaget" width="300" border="1" cellspacing="1" cellpadding="1">
    <tr>
    <td width="3%" align="center">&nbsp;</td>
    <td width="3%" align="center">Line1 </td>
    <td width="3%" align="center">Line2 </td>
    <td width="3%" align="center">Line3 </td>
    </tr>
    <tr>
    <td>Row1 </td>
    <td align="center"> <input type="checkbox" name="rowline[1][1]" value="11" /> </td>
    <td align="center"> <input type="checkbox" name="rowline[1][2]" value="12" /> </td>
    <td align="center"> <input type="checkbox" name="rowline[1][3]" value="13"/> </td>
    </tr>
    <tr>
    <td>Row2 </td>
    <td align="center"> <input type="checkbox" name="rowline[2][1]" value="21" /> </td>
    <td align="center"> <input type="checkbox" name="rowline[2][2]" value="22" /> </td>
    <td align="center"> <input type="checkbox" name="rowline[2][3]" value="23"/> </td>
    </tr>
    <tr>
    <td>Row3 </td>
    <td align="center"> <input type="checkbox" name="rowline[3][1]" value="31" /> </td>
    <td align="center"> <input type="checkbox" name="rowline[3][2]" value="32" /> </td>
    <td align="center"> <input type="checkbox" name="rowline[3][3]" value="33"/> </td>
    </tr>
    </table>
     </body>
     <script type="text/javascript">
     <!--
    function $(sId)
    {
    return document.getElementById(sId);
    }function setSelected(target)
    {
    if (target.selected == undefined)
    target.selected = true;
    else
    target.selected = !target.selected;
    }function setCheckboxes(target, isSelected)
    {
    var collInput = target.getElementsByTagName("input");
    for (var i=0; i<collInput.length; i++)
    {
    if (collInput[i].type.toLowerCase()=="checkbox")
    {
    collInput[i].checked = isSelected;
    }
    }
    }function setCheckboxesInColumn(targetCell, isSelected)
    {
    var curTable = targetCell.parentNode.parentNode;
    var curRow = targetCell.parentNode;
    var oCell;
    for (var i=curRow.rowIndex; i<curTable.rows.length; i++)
    {
    oCell = curTable.rows[i].cells[targetCell.cellIndex];
    setCheckboxes(oCell, isSelected);
    }
    }function getCtrlCells(targetTable, ctrlRowIndex, ctrlColumnIndex)
    {
    var collCell = new Array(); for (var i=ctrlColumnIndex+1; i<targetTable.rows[ctrlRowIndex].cells.length; i++)
    {
    collCell.push(targetTable.rows[ctrlRowIndex].cells[i]);
    } for (var i=ctrlRowIndex+1; i<targetTable.rows.length; i++)
    {
    collCell.push(targetTable.rows[i].cells[ctrlColumnIndex]);
    } return collCell;
    }function setBackgroundColor(oCell)
    {
    if (oCell.selected)
    oCell.style.backgroundColor = "yellow";
    else
    oCell.style.backgroundColor = "";
    }var oTable = $("tbeTaget");var ctrlRowIndex = 0;
    var startRowIndex = 1;
    var ctrlColumnIndex = 0;
    var startColumnIndex = 1;var oCell;
    for (var i=startRowIndex; i<oTable.rows.length; i++)
    {
    oCell = oTable.rows[i].cells[ctrlColumnIndex];
    oCell.onclick = function() {
    setSelected(this);
    var oRow = this.parentNode;
    setCheckboxes(oRow, this.selected);
    setBackgroundColor(this);
    };
    }for (var i=startColumnIndex; i<oTable.rows[ctrlRowIndex].cells.length; i++)
    {
    oCell = oTable.rows[ctrlRowIndex].cells[i];
    oCell.onclick = function() {
    setSelected(this);
    setCheckboxesInColumn(this, this.selected);
    setBackgroundColor(this);
    };
    }/*
    oTable.rows[ctrlRowIndex].cells[ctrlColumnIndex].onclick = function() {
    setSelected(this);
    var oTable = this.parentNode.parentNode;
    setCheckboxes(oTable, this.selected);
    };
     */var ctrlCells = getCtrlCells(oTable, ctrlRowIndex, ctrlColumnIndex);
    for (var i=0; i<ctrlCells.length; i++)
    {
    ctrlCells[i].className = "hand";
    }
     //-->
     </script>
    </html>
      

  4.   

    我可以给你介绍一种很简单的办法，就是使用smartgridview，
    这个控件有个级联checkbox模版列，可以满足你的要求，实现起来很简单。下载个yycontrol.dll就可以用了。