Question

我从表中的数据库中获取数据。现在我要编辑表格行中的特定字段并将该值保存到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);

?>

Answer 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处理程序，并初始化data-value属性等于innerText。

$('[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']}".
});

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

现在，您可以像处理标准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元素的一般情况下，您可能会避免重复代码。

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

1 个答案: