ajax 编辑表格

本文主要是介绍ajax 编辑表格，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

代码：

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:;'>删除&nbsp;</a>");delButton.attr('dataid', data_item['id']);delButton.click(delHandler);var editButton = $("<a class='optLink1' href='javascript:;'>编辑&nbsp;</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'>保存&nbsp;</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'>取消&nbsp;</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'>确认&nbsp;</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'>取消&nbsp;</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