Строка таблицы показывает после клика. нужно прятаться после нажатия на другую - PullRequest
Новая
       25

Строка таблицы показывает после клика. нужно прятаться после нажатия на другую

0 голосов
/ 05 января 2012

У меня есть этот код, который добавляет дополнительную строку таблицы при нажатии и скрывает ее при повторном нажатии точной строки.Я должен сделать открытую строку, чтобы исчезнуть при нажатии другой строки.В это время должна быть открыта только одна дополнительная строка.

Код: 

    $(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");
        });

     });

[ИЗДАНО]

Демонстрация - что-то вроде этого - 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-код: 

      <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>

1 Ответ

1 голос
/ 05 января 2012

Попробуйте следующее: 

$(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");
    });
});

См. Также пример .

=== ОБНОВЛЕНИЕ ===

Пожалуйста, замените следующие строкиВаш код: 

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>";
...