Php 在不重新加载页面的情况下更新表中的所有数据

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

表格如下：

单击

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>

技能名
$（函数（）{
$（“.upbtn”）。单击（函数（）{
var kode=$（“.kdid”）.val（）；var ahli=$（“.sklid”）.val（）；
var nama=$（“.nmid”）.val（）；
var dataString='kdid='+kode+'&sklid='+ahli+'&nmid='+nama；
$.ajax({
类型：“POST”，
url:“updt.php”，
数据：dataString，
cache:false，
成功：函数（html）{
$（“#look”）.after（html）；
}
})；返回false；
});
});

updt.php

<?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(); 
  } 
?>

<?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++; }
}
?>

---

您发布的代码将始终仅按照您的指定更新第一行值

问题是下面的行，例如
var kode=$（“.kdid”）.val（）
将仅从ids行获取第一个值，而不是其他值

请记住，在PHP端，您使用的是
while
循环，因此您输出的是所有值，而JavaScript端则没有

要解决此问题，您需要使用以下方法：

$(".kdid").each(function(){
    var current_kode = $(this).val();
    ...
});

这将逐个读取所有
kdid
值

现在由您决定是为每一行发出AJAX请求，还是将所有行聚集在一起，然后发出单个AJAX请求。您还需要一种方法来获取与手头的
当前\u kode
相关的值。提示：这可能很有用：

祝你好运。
首先将数组符号添加到每个输入名称属性

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

updt.php

<?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(); 
  } 
?>

<?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++; }
}
?>



此方法仍然使用序列化。代码以后可能会改进。
请至少使用一些缩进…@PeterTheLobster你是什么意思请…？他的意思是代码很难阅读，因为没有缩进，它只是左对齐。在我这边，代码是缩进的。我在Windows10下使用Firefox。这是你这边的展示问题还是OP用缩进更新了他的问题？