您的位置：首页 > Web前端 > JavaScript
js实现无刷新数据管理

2011-11-18 11:04 459 查看
源码如下：
<!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>js实现无刷新数据管理</title>
<link href="style/main.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#list table{ border:1px solid #e8e7e1;}
#list th,#list td{ margin:0 auto;height:26px;line-height:29px;text-align:left;padding-left:4px; border-width:0 0 1px 0;}
#list th{ background-color:#f7f6f0;font-size:14px;font-weight:normal;}
textarea.shorter{ width:40%; height:58px;}
span.red{ color:red;}span.blue{ color:blue;}span.point{ cursor:pointer; margin-right:12px;}span.hidden{ display:none;}
</style>
<script src="js/jquery-1.4.2.min.js" type="text/javascript" charset="gb2312"></script>

<script type="text/javascript" language="javascript">
function newTr(obj){
$(obj).parent().parent().after("<tr>"+
"<td><input name=\"textfield\" type=\"text\" class=\"text\" /></td>"+
"<td><input name=\"textfield\" type=\"text\" class=\"text short\" value=\"0\" /></td>"+
"<td> <span class=\"red point\" onclick=\"add(this)\">保存</span> <span class=\"blue point\" onclick=\"del(this)\">删除</span></td>"+
"</tr>");
}
function sendAjax(obj1,obj2){
alert(obj1+"|"+obj2);//这里调用AJAX数据更新方法
}
function del(obj){
var ftr = $(obj).parent().prev().prev(), name = ftr.find("input"),val;
if(name.length == 1){
val = name.val();
if(val == ""){val = name.next("span").text();}
}
else{
val = ftr.text();
}
if(confirm("确定删除该用户吗？")){
if(val != ""){sendAjax("delcustomer",val);}
$(obj).parent().parent().remove();
}
}
function add(obj){
var ob = $(obj),tr = ob.parent().prev().prev(),val = tr.find("input").val(),val1;
if(val == ''){alert("用户名称不能为空")}
else{
tr.html(val);
tr = tr.next();
val1=tr.find("input").val();
if(val1==""){val1="0";}
tr.html(val1);
sendAjax("addcustomer",val+"_"+val1);
ob.hide().replaceWith("<span class=\"red point\" onclick=\"modify(this)\">修改</span>");
alert('新增成功');
}
}
function save(obj){
var ob = $(obj),tr = ob.parent().prev().prev(),val = tr.find("input").val(),oval = tr.find("span").text(),val1;
if(val == ''){alert("用户名称不能为空")}
else{
tr.html(val);
tr = tr.next();
val1 = tr.find("input").val();
if(val1==""){val1="0";}
tr.html(val1);
sendAjax("savecustomer",oval+"_"+val+"_"+val1);
ob.hide().replaceWith("<span class=\"red point\" onclick=\"modify(this)\">修改</span>");
alert('保存成功');
}
}
function modify(obj){
var ob = $(obj),tr = ob.parent().prev();
tr.html("<input name=\"textfield\" type=\"text\" class=\"text short\" value=\""+tr.text()+"\" id=\"textfield\" />");
tr = ob.parent().prev().prev();
tr.html("<input name=\"textfield\" type=\"text\" class=\"text\" value=\""+tr.text()+"\" id=\"textfield\" /><span class=\"hidden\">"+tr.text()+"</span>");
ob.hide().replaceWith("<span class=\"red point\" onclick=\"save(this)\">保存</span>");
}
function butchsave(){
var errnum = 0,val,vals,mode = "add",oval;
$("table tr td input").each(function(i){
val = $(this).val();
if(i%2 == 0){
if(val == ""){
errnum++;
vals = "";
}
else{
vals = val;
$(this).replaceWith(val);
oval = $(this).next("span");
if(oval!=null){
mode="modify";
val = oval.text()+"_"+val;
}
}
}
else{
if(vals!=""){
vals +="_"+val;
if(mode == "add"){
sendAjax("savecustomer",vals);
}
else{
sendAjax("addcustomer",vals);
}
$(this).parent().next().html(" <span class=\"red point\" onclick=\"modify(this)\">修改</span> <span class=\"blue point\" onclick=\"del(this)\">删除</span>");
$(this).replaceWith(val);
}
}
});
if(errnum > 0){alert("有"+errnum+"条数据保存失败!")}
}
</script>
</head>

<body>
<div id="list">
<table cellpadding="0" cellspacing="0">
<tr>
<th width="40%">列一</th>
<th width="40%">列二</th>
<th> <span class="blue point" onclick="newTr(this)">新增</span> <span class="blue point" onclick="butchsave()">批量保存</span></th>
</tr>
<tr>
<td>示例数据一</td>
<td>示例数据二</td>
<td> <span class="red point" onclick="modify(this)">修改</span> <span class="blue point" onclick="del(this)">删除</span></td>
</tr>
</table>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航