编辑表行中的特定字段并更新 MySQL 表中的编辑值答案

【问题标题】：Edit particular field in a row of the table and update edited value in MySQL table编辑表行中的特定字段并更新 MySQL 表中的编辑值
【发布时间】：2017-05-30 11:37:06
【问题描述】：

我正在从表中的数据库中获取数据。现在我想编辑表行中的特定字段并将该值保存到 MySQL 中。

这是我在表格中显示数据和编辑的完整代码。在这里我想编辑状态。它是可编辑的，但在编辑如何从表中获取值并将该值更新到 MySQL 之后。

 <?php
include "config.php";
$sql = "select * from d_jobs where Status ='drafted' ";
$result = mysqli_query($conn,$sql);
$count = mysqli_num_rows($result);
//echo $count;
?>



<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

<script>

$("document").ready(function(){

$('#sdata').click(function(){

    var myTxt = $(('.status')+[i]).html();
    console.log(myTxt);
    var id = $(('.status')+[i]).attr('id');
    console.log(id);
    }
    /* $.ajax({
        type: 'post',
        url:  'job_field_edit.php',
        data: 'varname=' +myTxt 
    }); */

});
});
</script>

</head>
<body>
<table border="2" align="center">
  <thead>
    <tr>
      <th>Job Name</th>
      <th>Builder</th>
      <th>Job Type</th>
      <th>Status</th>
      <th>Effective Date Start</th>
       <th>Estimated completion date</th>
        <th>Job Gal Glag</th>
         <th>Take List Flag</th>
          <th>Planner</th>
           <th>Project Manager</th>
           <th>Hand Over</th>
           <th>Other Comments</th>
    </tr>
  </thead>
  <tbody>
<?php
      if( $count ==0 ){
        echo '<tr><td colspan="4">No Rows Returned</td></tr>';
      }else{
        while( $row = mysqli_fetch_array($result)){
        echo "<tr><td>{$row['JOB_NAME']}</td>
                  <td>{$row['BUILDER']}</td>
                  <td>{$row['JOB_TYPE']}</td>
                  <td contenteditable='true' id='{$row['JOB_ID']}' class='status[{$row['JOB_ID']}]'>{$row['status']}</td>
                  <td>{$row['EFFECTIVE_START_DATE']}</td>
                  <td>{$row['ESTIMATED_COMPLETION_DATE']}</td>
                  <td>{$row['JOB_GAL_FLAG']}</td>
                  <td>{$row['JOB_TAKE_LIST_FLAG']}</td>
                  <td>{$row['Planner']}</td>
                  <td>{$row['Project_Manager']}</td>
                  <td>{$row['Handover']}</td>
                  <td>{$row['Comments']}</td>
                  <td><input name='need_delete[{$row['JOB_ID']}]' type='checkbox' id='checkbox[{$row['JOB_ID']}]' value='{$row['JOB_ID']}'></td>
                  </tr>\n";
        }
      }
 ?>
  </tbody>
</table>
<input id="sdata" type="button" value="Send Data" />
</body>
</html>
<?php

mysqli_close($conn);

?>

【问题讨论】：

标签： php jquery html mysqli

【解决方案1】：

有很多方法可以解决这个问题。一种是省去手动的Send Data按钮，让javascript自动响应用户的contenteditable编辑。

不幸的是，contenteditable 元素不会触发 change 事件，但它们会触发 blur 事件，从中可以触发 change 事件。

首先，像这样构建您的 contenteditable 元素：

<td contenteditable=\"true\" class=\"status\" data-job-id=\"{$row['JOB_ID']}\">{$row['status']}</td>

然后，对于每个contenteditable 元素，附加一个blur 处理程序，并初始化一个等于innerText 的data-value 属性。

$('[contenteditable]').on('blur', function(e) {
    var self = $(this);
    if(self.text() !== self.data('value')) {
        self.trigger('change');
    }
    self.data('value', self.text());
}).each(function() {
    $(this).data('value', $(this).text()); // equivaluent to data-value="{$row['status']}".
});

因此，您可以拥有至少部分模仿 HTML 输入元素的 contenteditable 元素。

所以现在您可以像处理标准 HTML 输入元素一样附加 change 处理程序。

$(".status").on('change', function(e) {
    var job_id = $(this).data('jobId');
    var old value = $(this).data('value');
    var current value = $(this).text(); // in this regard, <input> is not mimicked. For a genuine <input> we would write `$(this).val()`.

    // here, perform ajax to keep server-side up to date.
});

DEMO

注意：当[contenteditable] 和.status 是彼此的虚拟同义词时，这种方法有点过分。但是，在一般情况下，contenteditable 元素可能有几个不同的类，那么您可能会避免大量重复代码。

【讨论】：