ホームページ  >  記事  >  ウェブフロントエンド  >  PHP Jquery_jquery に基づく編集可能なテーブルのコード

PHP Jquery_jquery に基づく編集可能なテーブルのコード

WBOY
WBOYオリジナル
2016-05-16 18:08:05961ブラウズ

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



コードをコピーします

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

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 "保存に失敗しました";

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
編集可能なテーブル
名前性別年齢メール
'.$row ['id']''.$row['name']' $row['年齢']''.$row['sex']' '.$row['email']'