Javascript 将HTML表编辑写入数据库

我有一个可以编辑和保存的HTML表格。保存时，我希望它更新对数据库所做的任何更改。现在我有了它，因此每当保存表时，它都会自动将“23”保存到“买方ID”列中，因为它是硬编码的。但是，如何获取它，使其不被硬编码，并读取和保存在表中键入、添加或编辑的任何值

HTML/PHP代码：

<div id="dialog-form" title="Add Vendor">
  <p class="validateTips">All form fields are required.</p>

  <form>
    <fieldset>
      <label for="mr_name">Vendor</label>
      <input type="text" name="mr_name" id="mr_name" class="text ui-widget-content ui-corner-all">
      <label for="buyer_id">Buyer ID</label>
      <input type="text" name="buyer_id" id="buyer_id" class="text ui-widget-content ui-corner-all">
      <label for="poc_n">POC Name</label>
      <input type="text" name="poc_n" id="poc_n" class="text ui-widget-content ui-corner-all">
      <label for="poc_p">POC Email</label>
      <input type="text" name="poc_e" id="poc_e" class="text ui-widget-content ui-corner-all">
      <label for="poc_p">POC Phone</label>
      <input type="text" name="poc_p" id="poc_p" class="text ui-widget-content ui-corner-all">

      <!-- Allow form submission with keyboard without duplicating the dialog button -->
      <input type="submit" id="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>

<form method="post" action="ajaxsubmit.php"> 
<div id="users-contain" class="ui-widget">
<table id="html_master" class="ui-widget ui-widget-content">
<thead>
    <tr class="ui-widget-header">
    <td>ID</td>
    <td>Vendor</td>
    <td>Buyer ID</td>
    <td>POC Name</td>
    <td>POC Email</td>
    <td>POC Phone</td>
    <td>Edit/Delete</td>
    </tr>
</thead>
<tbody>

<?php
    foreach ($dbh->query($sql) as $rows){
    ?>
    <tr>
        <td class="mr_id" contenteditable="false"><?php echo intval ($rows['MR_ID'])?></td>
        <td class="mr_name" name="field" contenteditable="false"><?php echo $rows['MR_Name']?></td>
        <td class="buyer_id" contenteditable="false"><?php echo $rows['Buyer_ID']?></td>
        <td class="poc_n" contenteditable="false"><?php echo $rows['MR_POC_N']?></td>     
        <td class="poc_e" contenteditable="false"><?php echo $rows['MR_POC_E']?></td>
        <td class="poc_p" contenteditable="false"><?php echo $rows['MR_POC_P']?></td>
        <td><input type="button" class="edit" name="edit" value="Edit">
        <input type="button" class="deactivate" name="deactivate" value="Deactivate"></td>
    </tr>
 <?php
  }
 ?>
</tbody>

    <input type="button" class="create-user" value="Add Row">
    <input type="submit" value="Save Table" class="save">

</table>
</div>

    <input type="button" class="create-user" value="Add Row">
    <input type="submit" value="Save Table" class="save">
</form>

Ajax提交代码：

<?php
$host="xxxxxxxx"; 
$dbName="xxxxx"; 
$dbUser="xxxxxxxxxxx"; 
$dbPass="xxxxxxxx";

$dbh = new PDO( "sqlsrv:server=".$host."; Database=".$dbName, $dbUser, $dbPass);
$dbh->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );

try {
    $conn = new PDO( "sqlsrv:server=".$host."; Database=".$dbName, $dbUser, $dbPass);
    $conn->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );

    $qry=$conn->prepare('INSERT INTO Stage_Rebate_Master (Buyer_ID) VALUES (23)');

    $qry->execute(Array("23" => $field));

} catch (PDOException $e) {
    echo 'Error: ' . $e->getMessage() . " file: " . $e->getFile() . " line: " . $e->getLine();
    exit;
}
?>
<form method="post">
 <input type="text" name="field" value="<?php print $field; ?>">
 <input type="submit" name="youraction" value="save">
</form>

删除所有
元素，只使用AJAX。单击

处理程序将JS

更改为此

$(document).on("click", ".save", function () {
   if (confirm('Saving will update the entire table. Are you sure you want to save?')) {
     var tabledata=[];
     $( "#html_master tbody tr" ).each(function( index ) {
         tabledata[index] = {
             mr_id: $( this ).find("td.mr_id").text(),
             mr_name: $( this ).find("td.mr_name").text(),
             buyer_id: $( this ).find("td.buyer_id").text(),
             poc_n: $( this ).find("td.poc_n").text(),
             poc_e: $( this ).find("td.poc_e").text(),
             poc_p: $( this ).find("td.poc_p").text()
         }
      });
      $.ajax({
        url: 'yourPHPfile.php', //Change this to your PHP file
        data: {tableData: tabledata},
        type: 'POST',
        dataType: 'JSON',
        error: function (request, error) {
           console.log(error);
        },
        success: function (data) {
            console.log(data);
        }
      });
    }
});

PHP

<?php
$host="xxxxxxxx"; 
$dbName="xxxxx"; 
$dbUser="xxxxxxxxxxx"; 
$dbPass="xxxxxxxx";

$dbh = new PDO( "sqlsrv:server=".$host."; Database=".$dbName, $dbUser, $dbPass);
$dbh->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );

$tableArray = $_POST['tableData'];

try {
    $conn = new PDO( "sqlsrv:server=".$host."; Database=".$dbName, $dbUser, $dbPass);
    $conn->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );

    //Loop through each Array object and grab each objects value for the specified database column
    foreach($tableArray as $key=>$value){

        $qry=$conn->prepare('UPDATE Stage_Rebate_Master SET `Mr_Name`=?,`Buyer_ID`=?,`Poc_n`=?,`Poc_e`=?,`Poc_p`=? WHERE `Mr_Id`=?');

        $qry->execute(Array($value->mr_name,$value->buyer_id,$value->poc_n,$value->poc_e,$value->poc_p,$value->mr_id));
    }

} catch (PDOException $e) {
    echo 'Error: ' . $e->getMessage() . " file: " . $e->getFile() . " line: " . $e->getLine();
    exit;
}
?>



这将使用AJAX post方法将对象的JSON数组传递给PHP。更改
prepare
语句中的列名以匹配数据库列。一旦您在“保存”对话框中单击“确认”，它将使用HTML表中的所有数据更新整个数据库表

我建议你多读一些PDO准备好的声明，因为你现在所拥有的还不接近于准备好的声明

这还假设
mr_id
列是您的主键。如果不是，则需要进行相应的更改
 
$var=$\u POST['var']。。。值（：var）。。。。。。。。bindParam（':var'，$var）.
都在手册中，您对此仍然有问题吗？发布到PHP的AJAX代码在哪里？问题的可能副本是^^^^^^@Fred ii的重新发布-是的，但仍在搜索答案…保存按钮的javascript给我带来了麻烦…当我运行程序时，加载页面上会显示添加行的对话框…我是否保留
$（文档）。在（“单击”，“.save”，函数（）{
这一行代码？我以前在这方面遇到过问题，它是一个括号/括号，你保留这一行。你发布的JS片段确实有不正确的括号和括号，但在没有看到全部内容的情况下，很难说清楚。我编辑了我的部分，以显示应该是怎样的。找到它…你需要一个括号才能找到它关闭此部分
tabledata[index]={
…现在将尝试您的代码！当您说“更改prepare语句中的列名以匹配数据库列”时，是指
标记中的文字名还是
标记中的类名，还是
$行['MR ID'中的名称？”
part？刚才看到你说的数据库列……回答了我的问题
<?php
$host="xxxxxxxx"; 
$dbName="xxxxx"; 
$dbUser="xxxxxxxxxxx"; 
$dbPass="xxxxxxxx";

$dbh = new PDO( "sqlsrv:server=".$host."; Database=".$dbName, $dbUser, $dbPass);
$dbh->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );

$tableArray = $_POST['tableData'];

try {
    $conn = new PDO( "sqlsrv:server=".$host."; Database=".$dbName, $dbUser, $dbPass);
    $conn->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );

    //Loop through each Array object and grab each objects value for the specified database column
    foreach($tableArray as $key=>$value){

        $qry=$conn->prepare('UPDATE Stage_Rebate_Master SET `Mr_Name`=?,`Buyer_ID`=?,`Poc_n`=?,`Poc_e`=?,`Poc_p`=? WHERE `Mr_Id`=?');

        $qry->execute(Array($value->mr_name,$value->buyer_id,$value->poc_n,$value->poc_e,$value->poc_p,$value->mr_id));
    }

} catch (PDOException $e) {
    echo 'Error: ' . $e->getMessage() . " file: " . $e->getFile() . " line: " . $e->getLine();
    exit;
}
?>