$(function() {
var g_table = $("table.data"); //全局变量
var init_data_url = "data.php?action=init_data_list";
$.get(init_data_url,function(data) {
var row_items = $.parseJSON(data); //用json格式接收
//相当于for(var i=0;j=row_items.length;i<j;i++)
for (var i = 0; i < row_items.length; i++) { //不用for in是因为它遍历数组的同时遍历里面的方法
var data_dom = create_row(row_items[i]);
g_table.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) {
if (res == "ok") {
$(meButton).parent().parent().remove(); //meButton不能用this代替,这里涉及到闭包,this不指向删除按钮
} else {
alert("删除失败...");
}
});
}
function create_row(data_item) {
var row_obj = $("<tr></tr>");
for(var k in data_item) { //枚举对象中的元素,K获得每个属性的名
// alert(typeof k);
if ("id" != k) { //相当于k!=id,忽略id
var col_td = $("<td></td>");
col_td.html(data_item[k]);
row_obj.append(col_td);
}
}
var editButton = $("<a href='javascript:;' class='optLink'>编辑 </a>");
editButton.click(delHandler);
var delButton = $("<a href='javascript:;' class='optLink'>删除 </a>");
delButton.attr("dataid",data_item['id']); //为什么这里id要加引号???????????
delButton.click(delHandler);
var opt_td = $("<td></td>");
row_obj.append(opt_td);
opt_td.append(editButton);
opt_td.append(delButton);
return row_obj;
}
$("#addBtn").click(function() {
var addRow = $("<tr></tr>");
for(var i = 0; i < 8 ; i++ ) {
var col_td = $("<td><input type='text' class='txtField'></a></td>");
addRow.append(col_td);
}
var col_opt = $("<td></td>");
var confirmBtn = $("<a href='javascript:;' class='optLink'>确认 </a>");
confirmBtn.click(function() {
var currentRow = $(this).parent().parent();
var input_filelds = currentRow.find("input");
var post_fields = {};
for(var i = 0 ; i < input_filelds.length; i++) {
post_fields['col_' + i] = input_filelds[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.replaceWhitn(postAddRow);
} else {
alert("插入失败...");
}
});
});
var canselBtn = $("<a href='javascript:;' class='optLink'>取消</a>");
canselBtn.click(function() {
$(this).parent().parent().remove();
});
col_opt.append(confirmBtn);
col_opt.append(canselBtn);
addRow.append(col_opt);
g_table.append(addRow);
});
});<?php
header('content-type:text/html;charset=utf8');
//header("Content-Type: application/json;charset=utf-8"); 会出错!!!
$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`"; //注意,这里的``不是单引号!不然会输出“bool[false]”,是Esc键下的" ` ",这里也可以不用这个括着
$query = query_sql($sql);
while ($row = $query ->fetch_assoc()) {
$data[] = $row;
}
echo json_encode($data);
}
function del_row() {
$dataid = $_POST['dataid']; //取到前面的id
//拼一段sql语句
$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 . ='\''.$_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 query_sql() {
$mysqli = new mysqli("127.0.0.1","root","root","etable"); //连接数据库
$sqls = func_get_args();
foreach ($sqls as $s) {
$query = $mysqli->query($s);
}
$mysqli->close();
return $query;
}
?>其它页面代码和老师的一样的。
代码是理解了老师的之后照着写的,“保存”模块代码和老师的一模一样还会出错,有遇到同样问题的吗?
$sql = trim($sql,", "); //逗号后面有个空格
对了,用词不当,不是保存模块,是按了“添加”之后写了数据按“确认”插入数据出错,
就是js文件那里的 $("#addBtn").click(function() {}函数 和PHP文件的function add_row() {}这个地方出错