的script.js
$(document).ready(function () {
$("#save").click(function () {
ajax("save");
});
$("#add_new").click(function () {
$(".entry-form").fadeIn("fast");
});
$("#close").click(function () {
$(".entry-form").fadeOut("fast");
});
$("#cancel").click(function () {
$(".entry-form").fadeOut("fast");
});
$(".del").live("click", function () {
if(confirm("Do you really want to delete this record ?")){
ajax("delete", $(this).attr("id"));
}
});
function ajax(action, id) {
if (action == "save")
data = $("#userinfo").serialize() + "&action=" + action;
else if (action == "delete") {
data = "action="+action+"&item_id="+id;
}
$.ajax({
type: "POST",
url: "ajax.php",
data : data,
dataType: "json",
success: function (response) {
if (response.success == "1") {
if (action == "save") {
$(".entry-form").fadeOut("fast", function () {
$(".table-list").append("<tr><td>" + response.cs + "</td><td>" + response.rating + "</td><td>" + response.doe + "</td><td>" + response.poe + "</td>td>" + response.ln + "</td>td>" + response.dor + "</td><td><a href='#' id='" + response.row_id+ "' class='del'>Delete</a></a></td></tr>");
$(".table-list tr:last").effect("highlight", {
color: '#4BADF5'
}, 1000);
});
$(".entry-form input[type='text']").each(function () {
$(this).val("");
});
} else if (action == "delete"){
var id = response.item_id;
$("a[id='" + id + "']").closest("tr").effect("highlight", {
color: '#4BADF5'
}, 1000);
$("a[id='" + row_id + "']").closest("tr").fadeOut();
}
} else {
alert("unexpected error occured, Please check your database connection");
}
},
error: function (res) {
alert("Unexpected error! Try again.");
}
});
}
});
ajax.php
<?php
error_reporting(0);
include("config.php");
if(isset($_POST) && count($_POST)){
$cs = mysql_real_escape_string($_POST['cs']);
$rating = mysql_real_escape_string($_POST['rating']);
$doe = mysql_real_escape_string($_POST['doe']);
$poe = mysql_real_escape_string($_POST['poe']);
$ln = mysql_real_escape_string($_POST['ln']);
dor = mysql_real_escape_string($_POST['dor']);
$id = 2;
$action = $_POST['action'];
if ($action == "save") {
mysql_query("insert into bfp_personnel_eligibility
values('".$id."', '".$cs."', '".$rating."', '".$doe."', '".$poe."', '".$ln."', '".$dor."')");
echo json_encode(array("success" => "0"));
}
else if($action == "delete") {
//echo "delete from info where id = '".$item_id."'";
$res = mysql_query("delete from info where id = '".$item_id."'");
if ($res) {
echo json_encode(array( "success" => "1", "item_id" => $item_id));
} else {
echo json_encode(array("success" => "0"));
}
/*
// PDO code
$sql = "delete from info where id = :item_id";
$q = $conn->prepare($sql);
$res = $q->execute(array("item_id" => $item_id));
//$res = mysql_query("delete from info where id = $item_id");
if ($res) {
echo json_encode(
array(
"success" => "1",
"item_id" => $item_id
)
);
} else {
echo json_encode(array("success" => "0"));
}
*/
}
} else {
echo json_encode(array("success" => "0"));
}
index.php - 我的主要表单
<?php
include("config.php");
?>
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>Ajax Table Editing</title>
<script src="js/jquery.js"></script>
<script src="js/script.js"></script>
<script src="js/jquery-ui-1.8.17.custom.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<br>
<div style="margin-left: 20%; margin-top: 5%;">
<input type="button" value="Add Record" id="add_new"><p>
<table width="800" border="1" cellpadding="0" cellspacing="0" class="table-list">
<tr align="center">
<th>Career Service/RA 1080(BOARD/BAR)Under Special Laws/CES/CSEE</th>
<th>Rating</th>
<th>Date of Examination/ Conferment</th>
<th>Place of Examination/ Conferment</th>
<th>Licence Number</th>
<th width="20%">Date of released</th>
<th>Delete</th>
</tr>
<?php
$res = mysql_query("select * from bfp_personnel_eligibility");
while($r = mysql_fetch_assoc($res)) {
echo '<tr>
<td>'.$r['eligibility_name'].'</td>
<td>'.$r['rating'].'</td>
<td>'.$r['doe'].'</td>
<td>'.$r['poe'].'</td>
<td>'.$r['number'].'</td>
<td>'.$r['dor'].'</td>
<td><a href="#" id="'.$r['id'].'" class="del">Delete</a></td>
</tr>';
}
?>
</table>
</div>
<div class="entry-form">
<form name="userinfo" id="userinfo">
<table width="100%" border="0" cellpadding="4" cellspacing="0">
<tr>
<td colspan="2" align="right"><a href="#" id="close">Close</a></td>
</tr>
<tr>
<td>Career Service/RA 1080</td>
<td><input type="text" name="cs"></td>
</tr>
<tr>
<td>Rating</td>
<td><input type="text" name="rating"></td>
</tr>
<tr>
<td>Date Of examination</td>
<td><input type="date" name="doe"></td>
</tr>
<tr>
<td>PLace of Exaination</td>
<td><input type="text" name="poe"></td>
</tr>
<tr>
<td>License Number</td>
<td><input type="text" name="ln"></td>
</tr>
<td>Date of Release</td>
<td><input type="date" name="dor"></td>
</tr>
<tr>
<td align="right"></td>
<td><input type="button" value="Save" id="save"><input type="button" value="Cancel" id="cancel"></td>
</tr>
</table>
</form>
</div>
</body>
</html>