php - 无需重新加载页面即可更新表中的所有数据

Question

我需要一些示例方法来更新从数据库中获取但不重新加载整个页面的表中的所有数据。
这是表格:


当Update All单击它会更新第一行，但不会更新下一行或最后一行。

<?php include"dbConnect.php";
try { $sele=$con->prepare("SELECT*from tb2");$sele->execute();
?> 
<form method="post" name="form" action="">

<table><tr><th>Skill</th><th>Name</th></tr>
<?php while($r = $sele->fetch(PDO::FETCH_ASSOC)) { ?>

<tr><td> <input type="hidden" class="kdid" value='<?php echo $r["kd"];?>'>
         <input type="text" class="sklid" value='<?php echo $r["skl"];?>'> </td>
    <td> <input type="text" class="nmid" value='<?php echo $r["name"];?>'> </td>
</tr>

<?php } ?></table>
<input type="submit" class="upbtn" value="Update All"/></form>
<?php } catch(PDOException $e) { echo 'ERROR:' . $e->getMessage(); } ?>
<div id="look"></div>

<script src="js/jquery-1.9.1.min.js" ></script>
<script type="text/javascript" >
  $(function() {
    $(".upbtn").click(function() {
      var kode = $(".kdid").val(); var ahli=$(".sklid").val(); 
      var nama=$(".nmid").val();

      var dataString = 'kdid='+ kode +'&sklid='+ ahli +'&nmid='+ nama;

      $.ajax({
        type: "POST",
        url: "updt.php",
        data: dataString,
        cache: false,
        success: function(html){
          $("#look").after(html);
        }
      }); return false;
    });
  });
</script>

更新文件

<?php 
  include"dbConnect.php";
  if(isset($_POST['kdid'])) {
    $up=$con->prepare("UPDATE tb2 set skl='".$_POST["sklid"]."',name='".$_POST["nmid"]."' where kd='".$_POST["kdid"]."'");
    $up->execute(); 
  } 
?>

我想我需要做一个循环，但我该怎么做？
请给我任何您认为对解决问题有用的建议或代码片段。
谢谢你的建议。

Answer 1

首先将数组表示法添加到每个输入名称属性。

<form method="post" id="frid">
<table>
<tr><th>Skill</th><th>Name</th></tr>
<?php foreach($sele as $r){ ?>

<tr><td> <input type="hidden" name="kd[]" value='<?php echo $r["kd"];?>'>
         <input type="text" name="skl[]" value='<?php echo $r["skl"];?>'> </td>
    <td> <input type="text" name="nm[]" value='<?php echo $r["name"];?>'> </td>
</tr>

<?php } ?>
</table>
<input type="submit" value="Update All"/>
</form>

在客户端代码端

$("#frid").submit(function() {
      $.ajax({ 
        type: "POST",
        url: "updt.php",
        data: $(this).serialize(),
        cache: false,
        success: function(data){
          //done
        }
      }); return false;
});

更新文件

<?php include"dbConnect.php";
$id = $_POST['kd'];

if($id){
$sk = $_POST["skl"];
$ne = $_POST["nm"];
$i=0;

foreach($ne as $se) {
$up=$con->prepare("UPDATE tb2 set skl= :s, name= :n where kd= :k");
$up->bindValue('s', $sk[$i]);
$up->bindValue('n', $se);
$up->bindValue('k', $id[$i]);
$up->execute();

$i++; }
}
?>

这个方法还是用serialize。代码可能会在以后改进。