代码:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax编辑表格</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<table class="data">
<a id="addBtn">添加学生</a>
<tr>
<td><input type="checkbox"></td>
<td>学号</td>
<td>姓名</td>
<td>手机号</td>
<td>班级</td>
<td>学院</td>
<td>Mac地址</td>
<td>操作</td>
</tr>
</table>
</div>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/my.js" type="text/javascript"></script>
</body>
</html>
main.css
body{
background-color:#f2f6fa;
}
.container{
margin:0 auto;
}
td {
font-size:16px;
width:120px;
height:40px;
text-align:center;
color:black;
cursor:pointer;
background-color:white;
}
#addBtn{
display: block;
width: 100px;
height: 28px;
text-align: center;
vertical-align: center;
border-radius: 5px;
font-size: 18px;
border:2px solid #3383f5;
background: #fff;
color: #3383f5;
}
#addBtn:hover{
background: #3383f5;
color: #fff;
}
input.txtField{
width:100px;
height:26px;
font-size: 16px;
}
.optLink1,.optLink2{
text-decoration:none;
display: inline-block;
height: 25px;
text-align: center;
width: 50px;
color:#fff;
border:2px solid #fff;
border-radius: 2px;
}
.optLink1{
background: #43de9f;
}
.optLink2{
background: #f37c69;
}
.optLink2:hover{
background: #f75c44;
}
.optLink1:hover{
background: #4de888;
}
my.js
$(function(){
var my_table = $("table.data");
var init_data_url = "data.php?action=init_data_list";
$.get(init_data_url,function(data){
var row_items = $.parseJSON(data);
for (var i = 0; i < row_items.length; i++) {
var data_dom = create_row(row_items[i]);
my_table.append(data_dom);
}
});
function create_row(data_item){
var row_obj = $("<tr><td><input type='checkbox'></td></tr>");
for (var k in data_item) {
if ("id" != k ) {
var col_td = $("<td></td>");
col_td.html(data_item[k]);
row_obj.append(col_td);
}
}
var delButton = $("<a class='optLink2' href='javascript:;'>删除 </a>");
delButton.attr('dataid', data_item['id']);
delButton.click(delHandler);
var editButton = $("<a class='optLink1' href='javascript:;'>编辑 </a>");
editButton.attr('dataid', data_item['id']);
editButton.click(editHandler);
var opt_td = $("<td></td>");
opt_td.append(editButton);
opt_td.append(delButton);
row_obj.append(opt_td);
return row_obj;
}
function delHandler(){
var data_id = $(this).attr("dataid");
var meButton = $(this);
$.post('data.php?action=del_row', {dataid: data_id}, function(res) {
if (res == "ok") {
$(meButton).parent().parent().remove();
}else {
alert("删除失败");
}
});
}
function editHandler(){
var data_id = $(this).attr("dataid");
var meButton = $(this);
var meRow = $(this).parent().parent();
var editRow = $("<tr><td><input type='checkbox'></td></tr>");
for (var i = 1; i < 7 ; i++) {
var editTd = $("<td><input type='text' class='txtField'/></td>");
var v = meRow.find('td:eq('+i+')').html();
editTd.find('input').val(v);
editRow.append(editTd);
}
var opt_td = $("<td></td>");
var saveButton = $("<a href='javascript:;' class='optLink1'>保存 </a>");
saveButton.click(function() {
var currentRow = $(this).parent().parent();
var input_fields = currentRow.find('input');
var post_fields = {};
for (var i = 0; i < input_fields.length-1; i++) {
post_fields['col_'+ i] = input_fields[i+1].value;
}
post_fields['id'] = data_id;
$.post('data.php?action=edit_row', post_fields, function(res) {
if (res == "ok" ) {
var newUpdateRow = create_row(post_fields);
currentRow.replaceWith(newUpdateRow);
}else{
alert(res);
alert("数据更新失败");
}
});
});
var cancelButton = $("<a href='javascript:;' class='optLink2'>取消 </a>");
cancelButton.click(function() {
var currentRow = $(this).parent().parent();
meRow.find('a:eq(0)').click(editHandler);
meRow.find('a:eq(1)').click(delHandler);
currentRow.replaceWith(meRow);
});
opt_td.append(saveButton);
opt_td.append(cancelButton);
editRow.append(opt_td);
meRow.replaceWith(editRow);
}
$("#addBtn").click(function(){
var addRow = $("<tr><td><input type='checkbox'></td></tr>");
for (var i = 0; i < 6; i++) {
var col_td = $("<td><input type='text' class='txtField'/></td>");
addRow.append(col_td);
}
var col_opt = $("<td></td>");
var confirmBtn = $("<a href='javascript:;' class='optLink1'>确认 </a>");
confirmBtn.click(function() {
var currentRow = $(this).parent().parent();
var input_fields = currentRow.find('input');
var post_fields = {};
for (var i = 0; i < input_fields.length-1; i++) {
post_fields['col_'+i] = input_fields[i+1].value;
}
$.post('data.php?action=add_row',post_fields, function(res) {
if (0 < res) {
post_fields['id'] = res;
var postAddRow = create_row(post_fields);
currentRow.replaceWith(postAddRow);
}else{
alert("插入失败");
}
});
});
var cancelBtn = $("<a href='javascript:;' class='optLink2'>取消 </a>");
cancelBtn.click(function() {
$(this).parent().parent().remove();
});
col_opt.append(confirmBtn);
col_opt.append(cancelBtn);
addRow.append(col_opt);
my_table.append(addRow);
});
});
data.php
<?php
$action = $_GET['action'];
switch ($action) {
case 'init_data_list':
init_data_list();
break;
case 'add_row':
add_row();
break;
case 'del_row':
del_row();
break;
case 'edit_row':
edit_row();
break;
}
function query_sql(){
$mysqli = new mysqli("127.0.0.1","root","123456","checkattendance");
mysqli_query($mysqli,"set names utf8");
$sqls = func_get_args();
foreach ($sqls as $s) {
$query = $mysqli->query($s);
}
$mysqli->close();
return $query;
}
function init_data_list(){
$sql = "SELECT * FROM student";
$query = query_sql($sql);
while($row = $query->fetch_assoc()){
$data[] = $row;
}
echo json_encode($data);
}
function add_row(){
$sql = "INSERT INTO student(sno,name,phone,class,academy,mac_address) VALUES(";
for ($i=0; $i < 6 ; $i++) {
$sql .= '\''.$_POST['col_'.$i].'\',';
}
$sql = trim($sql,",");
$sql .= ")";
if ($res = query_sql($sql,"SELECT LAST_INSERT_ID() as LD")) {
$d = $res->fetch_assoc();
echo $d['LD'];
}else{
echo "add error";
}
}
function del_row(){
$dataid = $_POST['dataid'];
$sql = "DELETE FROM student WHERE id = ".$dataid;
if (query_sql($sql)) {
echo "ok";
}else{
echo "del error";
}
}
function edit_row(){
$id = $_POST['id'];
$sno = $_POST['col_0'];
$name = $_POST['col_1'];
$phone = $_POST['col_2'];
$class = $_POST['col_3'];
$academy = $_POST['col_4'];
$mac_address = $_POST['col_5'];
$sql = "UPDATE student SET sno ='".$sno."',name ='".$name."',phone='".$phone."',class='".$class."',academy='".$academy."',mac_address='".$mac_address."' where id=".$id;
if (query_sql($sql)) {
echo "ok";
}else{
echo "edit error";
}
}
?>
课程学习请前往 https://www.imooc.com/learn/754