按钮替换

我想把这个按钮加在查询出的数据后面，但是只有第一条数据后面的按钮好使，后面的都不好用，我想应该是id的问题，但是具体咋回事我不知道，我想问问用循环输出查询结果后怎么能让这按钮好用，这按钮的输出也是在查询结果后循环输出来的，就是点击时只有第一条好用，其他的都是操作第一条的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
     <title>1111</title>
     <script language="javascript" type="text/javascript">
         function showdiv() {            
             document.getElementById("bg").style.display = "none";
             document.getElementById("show").style.display = "block";
         }
         function hidediv() {
             document.getElementById("bg").style.display = 'block';
             document.getElementById("show").style.display = 'none';
         }
     </script>
 </head>
 <body>
 <div>
     <div id="bg">
      <input id="btnshow" type="button" value="Show" onclick="showdiv();" />
     </div>
     <div id="show" style="display:none">
         <input id="btnclose" type="button" value="Close" onclick="hidediv();"/>
     </div>
</div>
<div>
     <div id="bg">
      <input id="btnshow" type="button" value="Show" onclick="showdiv();" />
     </div>
     <div id="show" style="display:none">
         <input id="btnclose" type="button" value="Close" onclick="hidediv();"/>
     </div>
</div>
 </body>
 </html>

解决方案 »

  1.   

    循环输出应该是数据库取出来的数据用PHP输出循环数据吧，每个ID后面加上递增数字，比如show0,show1...
    这里改成:
    <div id="bg0">
          <input id="btnshow0" type="button" value="Show" onclick="showdiv(0);" />
         </div>
         <div id="show0" style="display:none">
             <input id="btnclose0" type="button" value="Close" onclick="hidediv(0);"/>
         </div>同时上面函数改成
    function showdiv(num) {            
                 document.getElementById("bg"+num).style.display = "none";
                 document.getElementById("show"+num).style.display = "block";
             }
      

  2.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script language="javascript" type="text/javascript">
             function showdiv(num) {            
                 document.getElementById("bg"+num).style.display = "none";
                 document.getElementById("show"+num).style.display = "block";
             }
             function hidediv(num) {
                 document.getElementById("bg"+num).style.display = 'block';
                 document.getElementById("show"+num).style.display = 'none';
             }
         </script>
    </head>
    <body>
    <form>
    <table border="1">
    <?php
    $db = mysql_connect('localhost','root','root');
    mysql_select_db('ec',$db);
    if (!$db)
      {
      die('Could not connect: ' . mysql_error());
      }
    $result = mysql_query("select * from goods");
    echo "<tr>
    <th>GoodsID</th>
    <th>BarCode</th>
    <th>GoodsName</th>
    <th>Category</th>
    <th>Specifications</th>
    <th>Manufacturers</th>
    <th>Numbers</th>
    <th>Instructions</th>
    <th>Pictures</th>
    <th>Update</th>
    <th>Delete</th>
    </tr>";
    while($row = mysql_fetch_array($result))
      {
      echo "<tr>";
      echo "<td>" . $row['id'] . "</td>";
      echo "<td>" . $row['barcode'] . "</td>";
      echo "<td>" . $row['goods_name'] . "</td>";
      echo "<td>" . $row['category'] . "</td>";
      echo "<td>" . $row['specifications'] . "</td>";
      echo "<td>" . $row['manufacturers'] . "</td>";
      echo "<td>" . $row['number'] . "</td>";
      echo "<td>" . $row['instruction'] . "</td>";
      echo "<td>" . "<img src = '$row[picture_url]' style='width:80px;height=60px'/>" . "</td>";
      echo "<td id='bg0'>".
          "<input id='btnshow0' type='button' value='Show' onclick='showdiv(0)'/>".
          "</td>".
          "<td id='show0' style='display:none'>".
              "<input id='btnclose0' type='button' value='Close' onclick='hidediv(0)'/>".
          "</td>";
      echo "<td>"."<a href='delete.php?id=$row[id]'>"."Delete"."</a>"."</td>";
        echo "</tr>";
      }

    mysql_close($db);
    ?>
    </table>
    </form>
    </body>
    </html>不好使啊，麻烦帮我看看。
      

  3.   

    我举的例子只是说明里面是些递增的数字，不是写死的0，你加个计数器变量$n,在每个ID后面和函数内加上这个$n<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script language="javascript" type="text/javascript">
             function showdiv(num) {            
                 document.getElementById("bg"+num).style.display = "none";
                 document.getElementById("show"+num).style.display = "block";
             }
             function hidediv(num) {
                 document.getElementById("bg"+num).style.display = 'block';
                 document.getElementById("show"+num).style.display = 'none';
             }
         </script>
    </head>
    <body>
    <form>
    <table border="1">
    <?php
    $db = mysql_connect('localhost','root','root');
    mysql_select_db('ec',$db);
    if (!$db)
      {
      die('Could not connect: ' . mysql_error());
      }
    $result = mysql_query("select * from goods");
    echo "<tr>
    <th>GoodsID</th>
    <th>BarCode</th>
    <th>GoodsName</th>
    <th>Category</th>
    <th>Specifications</th>
    <th>Manufacturers</th>
    <th>Numbers</th>
    <th>Instructions</th>
    <th>Pictures</th>
    <th>Update</th>
    <th>Delete</th>
    </tr>";
    $n = 0;
    while($row = mysql_fetch_array($result))
      {
      echo "<tr>";
      echo "<td>" . $row['id'] . "</td>";
      echo "<td>" . $row['barcode'] . "</td>";
      echo "<td>" . $row['goods_name'] . "</td>";
      echo "<td>" . $row['category'] . "</td>";
      echo "<td>" . $row['specifications'] . "</td>";
      echo "<td>" . $row['manufacturers'] . "</td>";
      echo "<td>" . $row['number'] . "</td>";
      echo "<td>" . $row['instruction'] . "</td>";
      echo "<td>" . "<img src = '$row[picture_url]' style='width:80px;height=60px'/>" . "</td>";
      echo "<td id='bg$n'>".
          "<input id='btnshow$n' type='button' value='Show' onclick='showdiv($n)'/>".
          "</td>".
          "<td id='show$n' style='display:none'>".
              "<input id='btnclose$n' type='button' value='Close' onclick='hidediv($n)'/>".
          "</td>";
      echo "<td>"."<a href='delete.php?id=$row[id]'>"."Delete"."</a>"."</td>";
        echo "</tr>";
      }

    mysql_close($db);
    ?>
    </table>
    </form>
    </body>
    </html>
      

  4.   

    刚才漏了递增了
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script language="javascript" type="text/javascript">
             function showdiv(num) {            
                 document.getElementById("bg"+num).style.display = "none";
                 document.getElementById("show"+num).style.display = "block";
             }
             function hidediv(num) {
                 document.getElementById("bg"+num).style.display = 'block';
                 document.getElementById("show"+num).style.display = 'none';
             }
         </script>
    </head>
    <body>
    <form>
    <table border="1">
    <?php
    $db = mysql_connect('localhost','root','root');
    mysql_select_db('ec',$db);
    if (!$db)
      {
      die('Could not connect: ' . mysql_error());
      }
    $result = mysql_query("select * from goods");
    echo "<tr>
    <th>GoodsID</th>
    <th>BarCode</th>
    <th>GoodsName</th>
    <th>Category</th>
    <th>Specifications</th>
    <th>Manufacturers</th>
    <th>Numbers</th>
    <th>Instructions</th>
    <th>Pictures</th>
    <th>Update</th>
    <th>Delete</th>
    </tr>";
    $n = 0;
    while($row = mysql_fetch_array($result))
      {
      echo "<tr>";
      echo "<td>" . $row['id'] . "</td>";
      echo "<td>" . $row['barcode'] . "</td>";
      echo "<td>" . $row['goods_name'] . "</td>";
      echo "<td>" . $row['category'] . "</td>";
      echo "<td>" . $row['specifications'] . "</td>";
      echo "<td>" . $row['manufacturers'] . "</td>";
      echo "<td>" . $row['number'] . "</td>";
      echo "<td>" . $row['instruction'] . "</td>";
      echo "<td>" . "<img src = '$row[picture_url]' style='width:80px;height=60px'/>" . "</td>";
      echo "<td id='bg$n'>".
          "<input id='btnshow$n' type='button' value='Show' onclick='showdiv($n)'/>".
          "</td>".
          "<td id='show$n' style='display:none'>".
              "<input id='btnclose$n' type='button' value='Close' onclick='hidediv($n)'/>".
          "</td>";
      echo "<td>"."<a href='delete.php?id=$row[id]'>"."Delete"."</a>"."</td>";
        echo "</tr>";
       ++$n;
      }

    mysql_close($db);
    ?>
    </table>
    </form>
    </body>
    </html>