嵌套的Mysql表

Question

我有嵌套的mysql表。我用下面的腳本來隱藏/顯示錶格。當我點擊<a id="loginLink" onclick="toggleTable();" href="#">時，表中包含來自purchase_order的記錄，根據計數器的值顯示隱藏表。

就像上面的圖片，在記錄是2或更多，我點擊LOGINLINK嵌套表總是顯示從第一行（000004）的記錄。問題是什麼？

腳本

<script> 
    function toggleTable() 
     { 
      var elem=document.getElementById("loginTable"); 
      var hide = elem.style.display =="none"; 
      if (hide) { 
       elem.style.display="table"; 
      } 
      else { 
       elem.style.display="none"; 
      } 
     } 
    </script> 

PHP代碼

<?php 
$mysqli = new mysqli("localhost", "root", "", "app"); 
$q = $mysqli->real_escape_string($_GET['q']); 
$where = ''; 
if ($q != 'ALL') { 
    $where = " WHERE a.pr='$q' "; 
} 
    $result = $mysqli->query(" 
    select 
     a.counter, 
     a.total_quantity, a.pr, 
     a.total_quantity - b.quantity balance, 
     b.quantity, SUM(b.quantity) qtysum, b.unit, b.unit_cost, 
     b.unit_cost * b.quantity total_amount, 
     c.item_name 
    from 
     (select counter, pr, 
     sum(total_quantity) total_quantity 
     from purchase_request 
     group by counter) a 
    left outer join 
     (select counter, unit, unit_cost, 
     sum(quantity) quantity 
     from purchase_order 
     group by counter) b 
    on a.counter= b.counter 
    inner join 
     (select counter, item_name 
     from app 
     group by counter) c 
    on a.counter= c.counter 
    $where 
    group by a.counter 
    order by a.pr 
    "); 
    echo'<table id="tfhover" cellspacing="0" class="tablesorter" style="text-transform:uppercase;" border="1px"> 
     <thead> 
     <tr> 
     // cut 
     </tr> 
     </thead>'; 
     echo'<tbody>'; 
    $i=1; 
while($row = $result->fetch_assoc()){ 
$rowid=$row['counter']; 
if($row['pr'] != '') 
{ 
    echo'<tr id="pic"> 
      <td align="center" id="none">'; 
      if (empty($row['qtysum'])){ 
      echo '<a href="javascript:void(0)"></a></td>'; 
      } else { 
      echo '<a id="loginLink" onclick="toggleTable();" href="#">click</a></td>'; 
      } 
    echo'<td>'; 

     $result1 = $mysqli->query(" 
    select 
     c.*, c.counter, 
     c.unit_cost * c.quantity total_amount, 
     d.counter, d.item_name, d.item_description 
    from 
     (select * 
     from purchase_order) c 
    left outer join 
     (select counter, item_name, item_description 
     from app 
     group by counter) d 
    on c.counter= d.counter 
    where c.counter='$rowid' 
    group by c.id 
    order by c.id 
    "); 
    echo'<table id="loginTable" border="1" align="center" style="display:none"> 
     //shortcut 
    echo "</tbody></table>"; 
     echo'</td></tr>'; 
     } 
     } 
    echo "</tbody></table>"; 
?> 

Answer 1

因爲Id必須是唯一的。

試試這個：

function toggleTable(link) 
{ 
    var elem=document.getElementById("loginTable" + link.getAttribute('data-counter')); 
    var hide = elem.style.display =="none"; 
    if (hide) { 
     elem.style.display="table"; 
    } else { 
     elem.style.display="none"; 
    } 
    return false; 
} 

在PHP：

// id for link don't needed 
echo '<a onclick="toggleTable(this);" data-counter="'.$rowid.'" href="#">click</a></td>'; 
// ... cut 
echo'<table id="loginTable'.$rowid.'" border="1" align="center" style="display:none">