更新表中的所有數據而不重新加載頁面

我需要一些示例方法來更新從數據庫中提取但不重新加載整個頁面的表中的所有數據。更新表中的所有數據而不重新加載頁面

這裏是形式：

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

我想我需要做一個循環，但我應該怎麼做呢？

請給我任何建議或代碼片斷，你認爲這些建議或代碼片段可能有助於解決問題。

感謝您的建議。

來源

2015-12-18 Guspan Tanadi

請至少使用一些縮進請... – PeterTheLobster

@PeterTheLobster你是什麼意思請..？ –

他意味着代碼很難閱讀，因爲沒有縮進，它只是全部左對齊。 – hughjidette

首先將數組表示法寫入每個輸入名稱屬性。

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

此方法仍然使用串行化。代碼可能會稍後改進。

來源

2016-08-10 02:12:03

您發佈的代碼將始終只根據您的指定更新第一行的值。

問題是，以下行例如var kode = $(".kdid").val();將只從ID行獲得第一個值，而不是其他行。

請記住，在PHP端，您使用的是一個while循環，因此您輸出的是所有值，而JavaScript端缺少這些值。

要解決這個問題，你需要使用類似：

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

這將讀取所有的kdid值一個接一個。

現在由您決定是否對每行發出AJAX請求或將所有行聚集在一起然後發出單個AJAX請求。您還需要一種方法來獲取與current_kode相關的值。提示：這可能是有用的：https://api.jquery.com/siblings/

祝你好運。

來源

2015-12-21 09:52:07

更新表中的所有數據而不重新加載頁面

回答

相關問題