求助如何点击按钮更新数据？？？

我希望点击“updqte”按钮后按钮变成“save”，然后单元格变成文本框，编辑完文本框后点击“save”结果提交给了数据库。按钮改变用js做完了，其他的实在是不回了，各位大神帮帮忙吧。
<!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 showtd(num) {            
             document.getElementById("bg"+num).style.display = "none";
             document.getElementById("show"+num).style.display = "block";
         }
         function hidetd(num) {
             document.getElementById("bg"+num).style.display = 'block';
             document.getElementById("show"+num).style.display = 'none';
         }         function change() 
         { 
             var tds = document.getElementsByTagName("td");
             var t1 = document.getElementById("a").innerHTML;
             var txt = document.createElement("input"); 
             txt.type = "text"; 
             txt.value = t1;
             txt.id = "sort_t"; 
             tds[29].appendChild(txt); 
             txt.select(); 
         }         function mouseup(){ 
             if (document.getElementById("sort_t") && event.srcElement.id != "sort_t") 
             { 
                 var obj = document.getElementById("sort_t").parentElement; 
             var txtValue = document.getElementById("sort_t").value; 
             obj.innerText = txtValue; 
             } 
         } 
     </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='Update' onclick='showtd($n)'/>".
      "</td>".
      "<td id='show$n' style='display:none'>".
          "<input id='btnclose$n' type='button' value='Save' onclick='hidetd($n)'/>".
      "</td>";
  echo "<td>"."<a href='delete.php?id=$row[id]'>"."Delete"."</a>"."</td>";
    echo "</tr>";
   ++$n;
  }

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

解决方案 »

  1.   

    1.给你的save按钮一个onclick方法 点击后触发
    2.用ajax 提交参数到后台，调用php程序
    3.然后将接收内容提交到数据库
    4.成功or失败返回到页面
      

  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 showtd(num) {            
                 document.getElementById("bg"+num).style.display = "none";
                 document.getElementById("show"+num).style.display = "block";
             }
             function hidetd(num) {
                 document.getElementById("bg"+num).style.display = 'block';
                 document.getElementById("show"+num).style.display = 'none';
             }         function change() 
             { 
                 var tds = document.getElementsByTagName("td");
                 var t1 = document.getElementById("a").innerHTML;
                 var txt = document.createElement("input"); 
                 txt.type = "text"; 
                 txt.value = t1;
                 txt.id = "sort_t"; 
                 tds[30].appendChild(txt);              txt.select(); 
             }         function mouseup(){ 
                 if (document.getElementById("sort_t") && event.srcElement.id != "sort_t") 
                 { 
                     var obj = document.getElementById("sort_t").parentElement; 
                 var txtValue = document.getElementById("sort_t").value; 
                 obj.innerText = txtValue; 
                 } 
             } 
         </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 id='a'>" . $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='Update' onclick='showtd($n);change()' />".
          "</td>".
          "<td id='show$n' style='display:none'>".
              "<input id='btnclose$n' type='button' value='Save' onclick='hidetd($n);mouseup()'/>".
          "</td>";
      echo "<td>"."<a href='delete.php?id=$row[id]'>"."Delete"."</a>"."</td>";
        echo "</tr>";
       ++$n;
      }

    mysql_close($db);
    ?>
    </table>
    </form>
    </body>
    </html>
    我表上红色的部分是一个数组，我想让这个数组变成动态的，要不然所有按钮都只操作一条数据。有什么好办法没？
      

  3.   

    要是我做的话就是都设为隐藏的
    一个.show()
    一个.hide()
    当点击完一个操作就触发函数转换到另一个按钮
      

  4.   

    建议lz选择jq选择器都很强大
    搭配ajax 足够完成大量input提交工作
      

  5.   


    <!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 showtd(num) {            
                 document.getElementById("bg"+num).style.display = "none";
                 document.getElementById("show"+num).style.display = "block";
             }
             function hidetd(num) {
                 document.getElementById("bg"+num).style.display = 'block';
                 document.getElementById("show"+num).style.display = 'none';
             }         function change() 
             { 
                 var tds = document.getElementsByTagName("td");
                 var t1 = document.getElementById("a").innerHTML;
                 var txt = document.createElement("input"); 
                 txt.type = "text"; 
                 txt.value = t1;
                 txt.id = "sort_t"; 
                 tds[29].appendChild(txt);
                 txt.select(); 
             }         function mouseup(){ 
                 if (document.getElementById("sort_t") && event.srcElement.id != "sort_t") 
                 { 
                     var obj = document.getElementById("sort_t").parentElement; 
                 var txtValue = document.getElementById("sort_t").value; 
                 obj.innerText = txtValue; 
                 } 
             } 
         </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 id='a'>" . $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='Update' onclick='showtd($n);change()' />".
          "</td>".
          "<td id='show$n' style='display:none'>".
              "<input id='btnclose$n' type='button' value='Save' onclick='hidetd($n);mouseup()'/>".
          "</td>";
      echo "<td>"."<a href='delete.php?id=$row[id]'>"."Delete"."</a>"."</td>";
        echo "</tr>";
       ++$n;
      }

    mysql_close($db);
    ?>
    </table>
    </form>
    </body>
    </html>
    第24行的那个数组能不能改成动态的，要不然所有按钮都只操作同一条数据，应该怎么改啊？
      

  6.   

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $(".btn1").click(function(){
      $(".btn1").hide();
      $(".btn2").show();
      });
      $(".btn2").click(function(){
      $(".btn1").show();
      $(".btn2").hide();
      });
    });
    </script>
    </head>
    <body><button class="btn1" style="display:none">update</button>
    <button class="btn2">save</button>
    </body>
    </html>
     
    刚才描述的不是很清楚  写了个测试的代码 你可以参考
      

  7.   

    items = tds.join(',');
    好固执的孩纸啊
      

  8.   

    function change(obj)  
             {   //可以传递个当前对象过来
                 var tds = document.getElementsByTagName("td");
                 var t1 = document.getElementById("a").innerHTML;
                 var txt = document.createElement("input"); 
                 txt.type = "text"; 
                 txt.value = t1;
                 txt.id = "sort_t"; 
                 obj.parentNode.childNodes[1].appendChild(txt);   //添加至第二个td，可根据需要修改            
                 txt.select(); 
             }调用时，
    change(this)
    还有你的id命名重复了，这样只能获取第一个