Question

我有这段代码，点击时会添加一个额外的表格行，并在再次点击确切的行时隐藏它。当单击另一行时，我必须使打开的行消失。那时应该只打开一行。

代码：

    $(document).ready(function(){
        $("#datu_tab tr:odd").addClass("odd");
        $("#datu_tab tr:not(.odd)").hide();
        $("#datu_tab tr:first-child").show();

        $("#datu_tab tr.odd").click(function(){
            $(this).next("tr").toggle();
            $(this).find(".arrow").toggleClass("up");
        });

     });

[EDITED]

演示 - 类似这样的事情 - http://jsfiddle.net/658vH/

[edited2]

真实代码如下所示：

    $res=mssql_query($query);

    echo "

    <table border='1' id='datu_tab' class='saraksts_table' width='100%' cellspacing='0'>

     <tr class='saraksts_header'>
    <th><center><font size='1.2px'>xx</font></center></th>
   <th><center><font size='1.2px'>xx</font></center></th>
    <th><center><font size='1.2px'>xx</font></center></th>
    <th><center><font size='1.2px'>xx</font></center></th>
     <th><center><font size='1.2px'>xx</font></center></th>
      <th><center><font size='1.2px'>xx</font></center></th>
      <th><center><font size='1.2px'>xx</font></center></th>
       <th><center><font size='1.2px'>xx</font></center></th>
     <th><center><font size='1.2px'>xx</font></center></th>
    </tr>

   ";

    while($row = mssql_fetch_array($res))
   {

      echo "<tr  OnClick= 'javascript:AjaxVesture(".$row["atz_id"].")','tableRow.style.backgroundColor = red'  onmouseover='ChangeColor(this, true)' onmouseout='ChangeColor(this, false)' >";
     echo "<td>" . $row['xx'] . "</td>";
     echo "<td>" . $row['xx'] . "</td>";
     echo "<td>" . $row['xx'] . "</td>";
     echo "<td>" . $row['xx'] . "</td>";
     echo "<td>" . $row['xx'] . "</td>";
      echo "<td>" . $row['xx'] . "</td>";
      echo "<td>" . $row['xx'] . "</td>";
      echo "<td>" . $row['xx'] . "</td>";
      echo "<td>" . $row['xx'] . "</td>";
      echo "</tr>"; 
      echo "<tr>"; 
      echo" <td colspan='9' style='background-color:#EEEEEE;'>
         <div id=v".$row["atz_id"]." ></div>      
   </td>";
          echo "</tr>";
   }
     echo "</table>";

HTML code：

      <tr  OnClick= ' javascript:AjaxVesture(73)','tableRow.style.backgroundColor = red'  onmouseover='ChangeColor(this, true)' onmouseout='ChangeColor(this, false)' ><td>Lxx4</td><td>000111</td><td>Sxxxs</td><td>Pxxxxds</td><td>C</td><td></td><td></td><td></td><td> </td></tr>

      <tr> <td colspan='9' style='background-color:#EEEEEE;'><div id=v73 ></div> </td></tr>

     <tr  OnClick= ' javascript:AjaxVesture(9)','tableRow.style.backgroundColor = red'  onmouseover='ChangeColor(this, true)' onmouseout='ChangeColor(this, false)' ><td>Lxxx56</td><td>0xxx8</td><td>Sxxxs A</td><td>xxxx</td><td>Ax

     <tr> <td colspan='9' style='background-color:#EEEEEE;'> <div id=v9 ></div> </td></tr>

      <tr  OnClick= ' javascript:AjaxVesture(66)','tableRow.style.backgroundColor = red'  onmouseover='ChangeColor(this, true)' onmouseout='ChangeColor(this, false)' ><td>xx</td><td>00xx</td><td>xx</td><td>xxxx</td><td>Axxx</td><td></td><td>01.01.2005</td><td></td><td>LC</td></tr>

      <tr> <td colspan='9' style='background-color:#EEEEEE;'> <div id=v66 ></div>  </td></tr>

Answer 1

请尝试以下操作：

$(document).ready(function(){
    /* $("#datu_tab tr:odd").addClass("odd"); do you need this for css? */
    $("#datu_tab tr:not(:odd):not(:first-child)").hide();

    $("#datu_tab tr:odd").click(function(){
        var oNext = $(this).next("tr");
        $("#datu_tab tr:not(:odd):not(:first-child)").not(oNext).hide();
        oNext.toggle();
        $(this).find(".arrow").toggleClass("up");
    });
});

另见example。

=== UPDATE ===

请替换以下代码行：

echo "<tr  OnClick= 'javascript:AjaxVesture(".$row["atz_id"].")','tableRow.style.backgroundColor = red'  onmouseover='ChangeColor(this, true)' onmouseout='ChangeColor(this, false)' >";

到

echo "<tr  OnClick= 'javascript:AjaxVesture(".$row["atz_id"].");tableRow.style.backgroundColor = red'  onmouseover='ChangeColor(this, true)' onmouseout='ChangeColor(this, false)' >";

和

echo" <td colspan='9' style='background-color:#EEEEEE;'>
    <div id=v".$row["atz_id"]." ></div>      
</td>";

到

echo" <td colspan='9' style='background-color:#EEEEEE;'>
    <div id=\"v'.$row["atz_id"].'\" ></div>      
</td>";

单击后显示表行。点击另一个后需要隐藏

1 个答案: