PHP Jquery_jquery를 기반으로 하는 편집 가능한 테이블용 코드

table.php

코드 복사 코드는 다음과 같습니다.

header("Content-Type:text/html;charset=utf-8");
$mysqli=new MySQLi("localhost","root","123456","xiaoqiangdb")
if (mysqli_connect_errno) {
echo "데이터베이스에 연결하지 못했습니다.".mysqli_connect_error()
exit
}
?> 🎜>
$sql="사용자의 ID, 이름, 나이, 성별, 이메일 제한 0,20" 선택
$result=$mysqli->query($sql); 🎜>echo "";
echo ""
echo ""
echo "번호 번째>번째> 이름; 성별 나이 이메일";
echo " ";
while($row=$result->fetch_assoc()){
echo '';
echo '';
echo ''
echo '';
echo ''
echo ' ';
echo ''
}
echo "

편집 가능한 테이블

'.$row ['id']'	'.$row['name']'	'.$row['sex']'	'.$row['email']'

"; ->close()?>



style.css



코드 복사

코드는 다음과 같습니다.

@charset "utf-8"; /* CSS Document */ body{ 글꼴 크기:12px; 배경:#EEE; text-align:center;} 테이블{ width:600px; border:1px solid #050;} 번째 td{ 테두리:1px 솔리드 #050; 너비:120px;} 번째{ 배경:#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){
case 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 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, 이름:n,나이:a,sex: s,email:e},function(data){
alert(data)
})
break

td.html(data);
break;
}
}).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 a=tds.eq(2).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();
exit;
}
$sql="사용자 업데이트 이름 설정 ='{$_POST["name"]}',age='{$_POST["age"]}',sex='{$_POST["sex"]}',email='{$_POST[ "email "]}' 여기서 id='{$_POST["id"]}'";
$result=$mysqli->query($sql);
if($result){
echo "수정 성공";
}else{
echo "저장 실패"
$mysqli->close();