TABLE 中要隐藏某一行tr 该怎么实现？

document.all.tableId.rows[i].style.display = "none"; //第 i+1 行隐藏

解决方案 »

  1.   

    <table>
    <tr id=eyun><td>asdf</td></tr>
    <tr><td>xxxx</td></tr>
    </table>
    <button onclick=eyun.style.display=eyun.style.display=="none"?"":"none">click</button>
      

  2.   

    <HTML>
    <HEAD>
    <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
    <TITLE></TITLE>
    </HEAD>
    <BODY><table id="myTable" border="1" width="100%">
      <tr>
        <td width="25%"><input type="checkbox" name="C1" value="ON"></td>
        <td width="25%">&iexcl;&iexcl;</td>
        <td width="25%">&iexcl;&iexcl;</td>
        <td width="25%">&iexcl;&iexcl;</td>
      </tr>
      <tr>
        <td width="25%"><input type="checkbox" name="C1" value="ON"></td>
        <td width="25%">&iexcl;&iexcl;</td>
        <td width="25%">&iexcl;&iexcl;</td>
        <td width="25%">&iexcl;&iexcl;</td>
      </tr>
      <tr>
        <td width="25%"><input type="checkbox" name="C1" value="ON"></td>
        <td width="25%">&iexcl;&iexcl;</td>
        <td width="25%">&iexcl;&iexcl;</td>
        <td width="25%">&iexcl;&iexcl;</td>
      </tr>
      <tr>
        <td width="25%"><input type="checkbox" name="C1" value="ON"></td>
        <td width="25%">&iexcl;&iexcl;</td>
        <td width="25%">&iexcl;&iexcl;</td>
        <td width="25%">&iexcl;&iexcl;</td>
      </tr>
        <tr>
        <td width="25%"><input type="checkbox" name="C1" value="ON"></td>
        <td width="25%">&iexcl;&iexcl;</td>
        <td width="25%">&iexcl;&iexcl;</td>
        <td width="25%">&iexcl;&iexcl;</td>
      </tr>
      <tr>
        <td width="25%"><input type="checkbox" name="C1" value="ON"></td>
        <td width="25%">&iexcl;&iexcl;</td>
        <td width="25%">&iexcl;&iexcl;</td>
        <td width="25%">&iexcl;&iexcl;</td>
      </tr>
      <tr>
        <td width="25%"><input type="checkbox" name="C1" value="ON"></td>
        <td width="25%">&iexcl;&iexcl;</td>
        <td width="25%">&iexcl;&iexcl;</td>
        <td width="25%">&iexcl;&iexcl;</td>
      </tr>
      <tr>
        <td width="25%"><input type="checkbox" name="C1" value="ON"></td>
        <td width="25%">&iexcl;&iexcl;</td>
        <td width="25%">&iexcl;&iexcl;</td>
        <td width="25%">&iexcl;&iexcl;</td>
      </tr>
    </table>
    <input type="button" value="&Eacute;&frac34;&sup3;&yacute;&Ntilde;&iexcl;&Ouml;&ETH;&Ntilde;&iexcl;&Iuml;&icirc;" onclick="foo()">
    <script>
    function foo(){
    var oTable = document.all("myTable").firstChild;
    var oTrs = oTable.childNodes;
    var oChecks = document.all("C1");
    debugger;
    for(i=0; i<oChecks.length; i++)
    {
    if(oChecks.item(i).checked)
    oTable.removeChild(oTrs.item(i--));
    }
    }
    </script>
    </BODY>
    </HTML>
      

  3.   

    <script language="JavaScript">
    var HidedLines = new Array();function hideRow(row)
    {
    HidedLines[HidedLines.length] = row.rowIndex;
    row.style.display = "none";

    renewHideList();
    }function showRow(index)
    {
    MyTbl.rows[index].style.display = "";

    var newArr = new Array();
    for(var i = 0; i < HidedLines.length ; i ++)
    {
    if(HidedLines[i] != index)
    {
    newArr[newArr.length] = HidedLines[i];
    }
    }
    HidedLines = newArr;

    renewHideList();
    }function renewHideList()
    {
    HideList.innerHTML = "";
    for(var i = 0; i < HidedLines.length; i ++)
    {
    if(i == 0) HideList.innerHTML = "显示：";
    HideList.innerHTML += "<a href=\"#\" onclick=\"showRow(" + HidedLines[i] + ");return false;\">第" + (HidedLines[i] + 1) + "行</a>&nbsp;"
    }
    }</script>
    <table border="0" width="510" bgcolor="#6699FF" cellspacing="1" cellpadding="0" id="MyTbl">
    <tbody bgColor="#FFFFFF">
      <tr>
        <td width="301">1.</td>
        <td width="301">　</td>
        <td width="301">　</td>
        <td align="center" onclick="hideRow(this.parentElement);" width="60" style="cursor:hand;">隐藏</td>
      </tr>
      <tr>
        <td width="301">2.</td>
        <td width="301">　</td>
        <td width="301">　</td>
        <td align="center" onclick="hideRow(this.parentElement);" width="60" style="cursor:hand;">隐藏</td>
      </tr>
      <tr>
        <td width="301">3.</td>
        <td width="301">　</td>
        <td width="301">　</td>
        <td align="center" onclick="hideRow(this.parentElement);" width="60" style="cursor:hand;">隐藏</td>
      </tr>
      <tr>
        <td width="301">4.</td>
        <td width="301">　</td>
        <td width="301">　</td>
        <td align="center" onclick="hideRow(this.parentElement);" width="60" style="cursor:hand;">隐藏</td>
      </tr>
    </tbody>
    </table>
    <span id="HideList"></span>
      

  4.   

    <script language="JavaScript">
    <!--function hve_display(t_id,i_id){
    var t_id;
    var i_id;
    var on_img="../../tu/open1.gif";

    var off_img="../../tu/close1.gif";

    if (t_id.style.display == "none") {

    t_id.style.display="";
      i_id.src=off_img;}

    else{
    t_id.style.display="none";
      i_id.src=on_img;}
    }//-->
    </script>
    调用：onClick="hve_display(<%="id"&"2"%>,<%="img"&"2"%>)" <tr id="<%="id"&"2"%>" style="display=none">
      

  5.   

    最终版：<html>
    <head>
    <title>标题</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <link href="../ResourceFile/incOne/style.css" rel="stylesheet" type="text/css">
    <script language="javascript">
    function showadv(){
        if (document.MeetingRequisition.advshow.checked == true) {
            adv.style.display = "";
            advance.innerText="关闭查询选项"
        }else{
             adv.style.display = "none";
             advance.innerText="显示查询选项"
             }
        }
    </script>
    </head>
    <body bgcolor="#FFFFFF">
    <form name="MeetingRequisition"  method="post" runat="server">
      <table width="100%" border="1" cellpadding="0" cellspacing="0">
        <tr align="right"> 
          <td height="31"> 
            <input id="advcheck" name="advshow" type="checkbox" value="1" onClick="showadv()">
            <span id="advance">显示查询选项</span>&nbsp; </td>
        </tr>
        <tr id="adv" style="DISPLAY: none"> 
          <td height="31">查询表单</td>
        </tr>
        <tr> 
          <td>列表项DataGrid </td>
        </tr>
      </table>
    </form>
    </body>
    </html>