欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  后端开发

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

程序员文章站 2022-04-16 22:58:49
...
我希望点击“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命名重复了,这样只能获取第一个