PHP+AJAX实现表格实时编辑（慕课网PHP课程）

来源：互联网发布：纯阳谢云流捏脸数据编辑：程序博客网时间：2024/05/18 02:38

1、index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>可编辑表格DEMO</title><link rel="stylesheet" href="main.css" ></head><body><div class="container"><table class="data"><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td style="width:240px;"><a id="addBtn" class="optLink" href="javascript:;"/>添加</a></td></tr></table></div><script type="text/javascript" src="jquery.js"> </script><script type="text/javascript" src="table.js"> </script></body></html>

2、main.css

body{background-color:#899BA5;}.container {width:960px;margin:80px auto;}td {font-size:20px;width:120px;height:40px;text-align:center;color:black;cursor:pointer;background-color:white;}td:hover{background-color:#aaaacc;}input.txtField{width:90px;height:30px;}.optLink{text-decoration:none;color:#f46948;}.optLink:hover{color:#cc0033;}

3、table.js

$(function() {var g_table=$("table.data");var url = "table_data.php?action=init_data_list"$.get(url,function(data){var row_items=$.parseJSON(data);for(var i=0,j=row_items.length;i<j;i++){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("table_data.php?action=del_row",{dataid:data_id},function(res){if("ok"==res){$(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></tr>");for(var i=0;i<8;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='optLink'>保存 </a>");saveButton.click(function(){var currentRow=$(this).parent().parent();var input_fields=currentRow.find("input");var post_fields={};for(var i=0,j=input_fields.length;i<j;i++){post_fields['col_'+i]=input_fields[i].value;}post_fields['id']=data_id;$.post("table_data.php?action=edit_row",post_fields,function(res){if(res=='ok'){var updateRow=create_row(post_fields);currentRow.replaceWith(updateRow);}else{alert("数据更新失败");}});});var cancelButton=$("<a href='javascript:;' class='optLink'>取消</a>");cancelButton.click(function(){var currentRow=$(this).parent().parent();meRow.find('a:eq(0)').click(delHandler);meRow.find('a:eq(1)').click(editHandler);currentRow.replaceWith(meRow);});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("id"!=k){var col_td=$("<td></td>");col_td.html(data_item[k]);row_obj.append(col_td);}}var delButton=$("<a href='javascript:;' class='optLink'>删除 </a>");delButton.attr("dataid",data_item['id']);delButton.click(delHandler);var editButton=$("<a href='javascript:;' class='optLink'>编辑</a>");editButton.attr("dataid",data_item['id']);editButton.click(editHandler);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(var i=0;i<8;i++){var col_td=$("<td><input class='txtField' type='text' value='' /></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_fields=currentRow.find("input");var post_fields={};for(var i=0,j=input_fields.length;i<j;i++){post_fields['col_'+i]=input_fields[i].value;}$.post("table_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:;' class='optLink'>取消</a>");cancelBtn.click(function(){$(this).parent().parent().remove();});col_opt.append(confirmBtn);col_opt.append(cancelBtn);addRow.append(col_opt);g_table.append(addRow);});});

4、table_data.php

<?phpheader ( "Content-type:text/html;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`";$query=query_sql($sql);while($row = $query->fetch_assoc()){$data[] = $row;}//var_dump($data);echo json_encode($data);}function del_row(){$dataid=$_POST['dataid'];$sql="delete from `et_data` where id=".$dataid;if(query_sql($sql)){echo "ok";}else{echo "error...";}}function add_row(){if(empty($_POST)){echo "METHOD NOT ALLOWED >>>> ";}$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 .= "'" . addslashes($_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 "error...";}}function edit_row(){if(empty($_POST)){echo "METHOD NOT ALLOWED >>>> ";}$id=$_POST['id'];unset($_POST['id']);$sql = "update `et_data` set ";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 "error...";}}function query_sql(){$mysqli = new mysqli("localhost", "root", "root", "etable");$mysqli->query("set names utf8");$sqls = func_get_args();foreach($sqls as $s){$query = $mysqli->query($s);}$mysqli->close();return $query;}

阅读全文

0 0