編輯表格行中的特定字段並更新MySQL表格中的編輯值

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處理程序，並初始化一個等於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元素，那么您可能會避免重復代碼。

編輯表格行中的特定字段並更新MySQL表格中的編輯值

問題描述

1 個解決方案

解決方案1
0 已采納 2017-05-30 14:58:28

編輯表格行中的特定字段並更新MySQL表格中的編輯值

問題描述

1 個解決方案

解決方案1 0 已采納 2017-05-30 14:58:28

解決方案1
0 已采納 2017-05-30 14:58:28