当前位置：Gxlcms > PHP教程 > 求助如何点击按钮更新数据？

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

时间：2021-07-01 10:21:17 帮助过：14人阅读

我希望点击“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.给你的save按钮一个onclick方法 点击后触发
2.用ajax 提交参数到后台，调用php程序
3.然后将接收内容提交到数据库
4.成功or失败返回到页面

你这里要用到ajax来提交数据

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

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

我表上红色的部分是一个数组，我想让这个数组变成动态的，要不然所有按钮都只操作一条数据。有什么好办法没？

1.给你的save按钮一个onclick方法 点击后触发
2.用ajax 提交参数到后台，调用php程序
3.然后将接收内容提交到数据库
4.成功or失败返回到页面
不好意思是第24行，刚才没标上颜色。

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

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

你这里要用到ajax来提交数据 

<!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行的那个数组能不能改成动态的，要不然所有按钮都只操作同一条数据，应该怎么改啊？

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

刚才描述的不是很清楚 写了个测试的代码 你可以参考

XML/HTML code
?
12345678910111213141516171819202122

<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function……
谢谢你，我没学过ajax和jq。

items = tds.join(',');

好固执的孩纸啊

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命名重复了，这样只能获取第一个

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！