Question

我有一个可以编辑和保存的HTML表格。保存后，我希望它更新对数据库所做的任何更改。现在我拥有它，以便每当表保存时，它会自动将“23”保存到“Buyer_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>

JavaScript保存功能：

// ----- Save Table -----
$(document).on("click", ".save", function () {

  // ------ Confirmation box in order to deactivate/activate row -----
  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提交代码：

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

Answer 1

删除所有<form>元素并仅使用AJAX。将您的JS on click处理程序更改为此。

$(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语句中的列名称以匹配数据库列。一旦您点击＆＃34;确认＆＃34;它将使用HTML表格中的所有数据更新整个数据库表。在你的＆＃34;保存＆＃34;对话。

我建议你在PDO准备好的陈述上做更多的阅读，因为你现在的内容甚至都没有接近准备好的陈述。

这也假设mr_id列是您的主键。如果不是，您需要相应地进行这些更改。

将HTML表编辑写入数据库

1 个答案: