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

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

?>

来源

2017-05-30 krishna bhargavi

有很多方法可以解决这个问题。一是免除手册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元素，那么您可能会避免代码的重复。

来源

2017-05-30 14:58:28

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

回答

相关问题