更新表中的所有数据而不重新加载页面

时间:2015-12-18 23:23:27

标签: php jquery ajax

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

以下是表格:

1 http://oi67.tinypic.com/33y6iyc.jpg

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

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

我想我需要制作一个循环,但我该怎么做呢?

请告诉我您认为可能有助于解决问题的任何建议或代码段。

感谢您的建议。

1 个答案:

答案 0 :(得分:0)

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

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

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