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

猜你喜欢