PHP Jquery_jquery に基づく編集可能なテーブルのコード-jsチュートリアル-php.cn

table.php

コードをコピーコードは次のとおりです:

header( "Content-Type:text/html;charset=utf-8");
$mysqli=new MySQLi("localhost","root","123456","xiaoqiangdb"); (mysqli_connect_errno) {
echo "データベースに接続できませんでした".mysqli_connect_error();
}
?>
🎜>

$sql="ユーザーの ID、名前、年齢、性別、メールアドレスを選択制限 0,20";
$result=$mysqli->query($sql); 🎜>echo "";
echo "";
echo ""; th>";
echo " ";
while($row=$result->fetch_assoc()){
echo '';
echo '';
echo '';
echo '';
echo '';
echo ' ';
echo ''
}
echo "
$mysqli ->close();

style.css

コードをコピーします

コードは次のとおりです:

@charset "utf-8" /* CSS Document */ body{ font-size:12px; background:#EEE; text-align:center;} table{ width:600px; border-collapse:collapse;} 番目td{ ボーダー:1px ソリッド #050; 幅:120px;} th{ 背景:#282; カラー:ホワイト;}

table.js 

コードをコピー

コードは次のとおりです:

// JavaScript Document $(function(){ $( "tr :even").css("背景色","#ffff99"); $("tr td:not(.id)").click(function(){ if($ (this ).children('input').length > 0) return // テーブル内の元のコンテンツを取得します

var data=$(this).text(); >// コンテンツを空に設定します

$(this).html('');
var td=$(this);
// テーブルを作成します
var inp=$(' ');
inp.val(data)
inp.css("背景色",$(this).css("背景色")) ;
inp.css("border-width","0px");
inp.css("width",$(this).css("width"));テーブル入力フォーム内
inp.appendTo($(this));
//フォームがテーブルに配置された後にフォーカスイベントがトリガーされます
inp.trigger('focus'); >//すべてのコンテンツを選択
inp.trigger('select');
//キーボード時間を追加
inp.keydown(function(event){
switch(event.keyCode){
ケース 13:
td .html($(this).val());
//Ajax を使用してサーバーにデータを送信します
//行内のすべての列オブジェクトを取得します
var tds=td.parent("tr") .children("td");
var i=tds.eq(0).text();
var n=tds.eq(1).text( );
var a=tds.eq(2).text();
var e=tds.eq(2).text(); ();
//var user ={id:i,name:n,age:a,sex:s,email:e}
$.post("save.php",{id:i,名前:n,年齢:a,性別:s,メールアドレス:e},function(data){
alert(data)
}); td.html(data);
ブレーク;
}
}).blur(function(){
td.html($(this).val());
// Ajax を使用してサーバーにデータを転送します
// 行内のすべての列オブジェクトを取得します
var tds=td.parent("tr").children("td");
var i=tds. eq(0).text();
var n=tds.eq(1).text();
var s=tds .eq(3).text();
var e=tds.eq(4).text();
//var user={id:i,name:n,age:a,sex: s,email:e}
$.post ("save.php",{id:i,name:n,age:a,sex:s,email:e},function(data){
alert (データ);
})
}); 🎜>
コードをコピーします

コードは次のとおりです:

 
header("Content-Type:text/html;charset=utf-8"); 
$mysqli=new MySQLi("localhost","root"," 123456","xiaoqiangdb"); 
if(mysqli_connect_errno){ 
echo "データベースへの接続に失敗しました".mysqli_connect_error(); 
終了; 
} 
$sql="ユーザーを更新しますset name ='{$_POST["name"]}',age='{$_POST["age"]}',sex='{$_POST["sex"]}',email='{$_POST[ "email "]}' where id='{$_POST["id"]}'"; 
$result=$mysqli->query($sql); 
if($result){ 
echo "変更が成功しました"; 
echo "保存に失敗しました"; 