最近在慕课网上学习php + ajax 实现表格的实时编辑，老师讲的非常好，感谢老师，按照老师的讲解，自己敲了一遍，收获很多。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>可编辑表格DEMO</title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" >
<link rel="stylesheet" href="css/main.css" >
</head>
<body>
<div class="container">
<table class="data table table-bordered table-striped">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th><a id="addBtn" class="optLink" href="javascript:;">增加</a></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script type="text/javascript" src="../jQuery/jQuery-2.1.4.min.js"> </script>
<script type="text/javascript" src="js/app.js"> </script>
</body>
</html>
$(function() {
var tbody = $("table.data tbody");
var init_data_url = "data.php?action=init_data_list";
$.get(init_data_url, function(data) {
//打断点后可以在console 里面写data 回车显示data数据
//debugger;
//从后台获取所有的数据并用$.parseJSON转换成对象
var row_items = $.parseJSON(data);
for (i = 0; i < row_items.length; i++) {
var data_dom = create_row(row_items[i]);
tbody.append(data_dom);
}
})
function delHandler() {
var data_id = $(this).attr("dataid");
var meButton = $(this);
$.post("data.php?action=del_row", { dataid: data_id }, function(res) {
alert(res);
console.log(res == "ok");
if (res == "ok") {
$(meButton).parent().parent().remove();
} else {
alert("删除失败...");
}
});
}
function editHander() {
alert("123");
var data_id = $(this).attr("dataid");
var meButton = $(this);
var meRow = $(this).parent().parent();
var editRow = $("<tr></tr>");
debugger;
for (var i = 0; i < 8; i++) {
var editTd = $("<td><input type='text' class='from-control'/></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:;'>保存 </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; i++) {
post_fields["col_" + i] = input_fields[i].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("数据更新失败...")
}
})
})
var cancelButton = $("<a href='javascript:;'>取消</a>");
opt_td.append(saveButton);
opt_td.append(cancelButton);
editRow.append(opt_td);
meRow.replaceWith(editRow);
}
function create_row(data_item) {
var row_obj = $("<tr></tr>");
for (var k in data_item) {
if (k != "id") {
var col_td = $("<td></td>");
col_td.html(data_item[k]);
row_obj.append(col_td);
}
}
var delButton = $("<a href='javascript:;'>删除 </a>");
delButton.attr("dataid", data_item["id"]);
delButton.click(delHandler);
var editButton = $("<a href='javascript:;'> 编辑</a>");
editButton.attr("dataid", data_item["id"]);
editButton.click(editHander);
var opt_td = $("<td></td>");
opt_td.append(delButton);
opt_td.append(editButton);
row_obj.append(opt_td);
return row_obj;
}
$("#addBtn").click(function() {
var addRow = $("<tr></tr>");
for (i = 0; i < 8; i++) {
var col_td = $("<td><input type='text' class='form-control' /></td>");
addRow.append(col_td);
}
var col_opt = $("<td></td>");
var confirmBtn = $("<a href='javascript:;'>确认 </a>");
confirmBtn.click(function() {
var currentRow = $(this).parent().parent();
var input_fields = currentRow.find("input");
var post_fields = {};
for (i = 0; i < input_fields.length; i++) {
post_fields["col_" + i] = input_fields[i].value;
}
$.post("data.php?action=add_row", post_fields, function(res) {
if (res > 0) {
post_fields["id"] = res;
var postAddRow = create_row(post_fields);
currentRow.replaceWith(postAddRow);
} else {
alert("插入失败...")
}
})
})
var cancelBtn = $("<a href='javascript:;'>取消 </a>");
cancelBtn.click(function() {
$(this).parent().parent().remove();
})
col_opt.append(confirmBtn);
col_opt.append(cancelBtn);
addRow.append(col_opt);
tbody.append(addRow);
})
})<?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 init_data_list() {
$sql = "SELECT * FROM `et_data`";
$query = query_sql($sql);
while ($row = $query->fetch_assoc()) {
$data[] = $row;
}
//把数据转换成json格式
echo json_encode($data);
}
function del_row() {
//echo "ok";
$dataid = $_POST["dataid"];
$sql = "DELETE FROM et_data WHERE id =" . $dataid;
if (query_sql($sql)) {
echo "ok";
} else {
echo "db error...";
}
}
function add_row() {
$sql = 'INSERT INTO et_data (c_a,c_b,c_c,c_d,c_e,c_f,c_g,c_h) VALUES(';
for ($i = 0; $i < 8; $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 "db error...";
}
}
function edit_row() {
$sql = "UPDATE et_data SET ";
$id = $_POST["id"];
unset($_POST["id"]);
for ($i = 0; $i < 8; $i++) {
$sql.= ' c_' . chr(97 + $i) . '= \'' . $_POST["col_" . $i] . '\', ';
}
$sql = trim($sql, ", ");
$sql.= "WHERE id=" . $id;
if (query_sql($sql)) {
echo "ok";
} else {
echo "db error ...";
}
}
function query_sql() {
$mysqli = new mysqli("127.0.0.1", "root", "123", "demodb");
$sqls = func_get_args();
foreach ($sqls as $s) {
$query = $mysqli->query($s);
}
$mysqli->close();
return $query;
}
?>
5243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
