テーブルの行の特定のフィールドを編集し、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

これにはいくつかの方法があります。 1つは手動のSend Dataボタンを省略し、ユーザーのcontenteditableの編集内容にjavascriptが自動的に応答できるようにすることです。

残念ながら、contenteditable要素がchangeイベントを発生しませんが、彼らはchangeイベントをトリガすることができ、そこからblurイベントを、火災行います。

まず、このようなあなたの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']}". 
});

したがって、あなたは、少なくとも部分的には、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要素が存在する一般的なケースでは、コードの繰り返しが避けられます。

出典

2017-05-30 14:58:28

テーブルの行の特定のフィールドを編集し、MySQLテーブルの編集した値を更新する

答えて

関連する問題