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

Question

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

以下是表单：

当单击“更新全部”时，它将更新第一行，但不会更新下一行或最后一行。

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

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

我认为我需要一个循环，但是该如何实现呢？

请给我任何建议或代码片段，您认为这可能有助于解决问题。

感谢您的建议。

- Guspan Tanadi

---

请至少使用一些缩进... - PeterTheLobster

@PeterTheLobster你的意思是什么..? - Guspan Tanadi

他的意思是，代码很难阅读，因为没有缩进，所有内容都靠左对齐。 - hughjidette

在我的端上，代码已经缩进了。我正在使用Windows 10下的Firefox浏览器。这是你那边的显示问题还是OP更新了他的问题并加入了缩进？ - Mario Awad

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

updt.php

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

这种方法仍然使用序列化。代码可能会在以后改进。

- Guspan Tanadi

Answer 2

你发布的代码将始终仅更新指定的第一行数值。

问题在于，例如以下行 var kode = $(".kdid").val(); 仅获取 ids 行中的第一个值而不是其他值。

请记住，在 PHP 端，你正在使用 while 循环，因此输出所有值，而 JavaScript 端缺少此功能。

要解决此问题，你需要使用类似以下的内容：

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

这将逐个读取所有kdid值。

现在由您决定是为每一行发出AJAX请求还是将所有行分组并发出单个AJAX请求。您还需要一种方法来获取与手头的current_kode相关的值。提示：这可能很有用：https://api.jquery.com/siblings/

祝你好运。

- Mario Awad