嵌套的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 Code

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