关于jquery 实现无刷新增删改查的例子。

0 0

关于jquery 实现无刷新增删改查的例子。15

用jquery 做了个无刷新增，删，改，查的小例子，没用与数据库关联。部分功能不是太完善。存在几个问题
1。在增加的时候，save()方法里面最后二行整体替换TD值的时候报：未知的运行时错误。
2。对于一条记录，修改，删除只能执行一次，第二次就没效果了。
3.批量增加，修改还没有实现。

对于以上问题请行家指点一下。

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" />
<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="custom.js" type="text/javascript"></script>

</head>
<body>
<form name="form1">
<button name="1" id="btn1">add</button>  
<button name="2" id="btn2" onclick="update()">update</button>  
<button name="3" id="btn3" onclick="del(this.form)">delete</button>
<table id="large" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" name="cbv" id="cbv" onclick="sel('cbv','ch')"/></th>
<th>Email</th>
<th>Id</th>
<th>Phone</th>
</tr>
</thead>
<tbody id="tbody">
<tr id="tr1">
<td><input type="checkbox" name="ch" id="ch" value="tr1"/></td>
<td>123@com</td>
<td>0</td>
<td>44444444</td>
</tr>
<tr id="tr2">
<td><input type="checkbox" name="ch" id="ch" value="tr2"/></td>
<td>456@com</td>
<td>1</td>
<td>55555555</td>
</tr>
<tr id="tr3">
<td><input type="checkbox" name="ch" id="ch" value="tr3"/></td>
<td>567@com</td>
<td>2</td>
<td>666666666</td>
</tr>
   </tbody>
</table>
</form>
</div>
</body>
</html>

JQUERY 代码

$(document).ready(function() {
//add
$('#btn1').click(function () {
   var html='<tr>';
   html += '<td><input type="checkbox" id="cbv" name="ch" class="writable"/></td>';
   html += '<td><input type="text" id="email" name="email" class="writable"/></td>';
   html += '<td><input type="text" id="id" name="id" class="writable"/></td>';
   html += '<td><input type="text" id="phone" name="phone" class="writable"/> <a href ="#" onclick="save()">save</a>  <a href ="#" onclick="cancle()">cancle</a></td>';
   html += '</tr>';
   $('#tbody').append(html);
   }
);
});

//save
function save() {
$("input[type=text]").each(function(){
$(this).addClass("writable");
});
var objAttrVals = $("#tbody").find("tr > td").find(".writable");
var obj = {};
   for(var i=0;i<objAttrVals.length;i++){
    var attrVal = $(objAttrVals[i]).val();
$(obj).attr(objAttrVals[i].id,attrVal);
    }
var htmls = '<tr><td><input type="checkbox" id="ch" name="ch"/>';
htmls += '</td>';
htmls += '<td>';
htmls += obj.email;
htmls += '</td>';
htmls += '<td>';
htmls += obj.id;
htmls += '</td>';
htmls += '<td>';
htmls += obj.phone;
htmls += '</td></tr>';
var tr = objAttrVals.parent().parent();
tr.remove();
$('#tbody').append(htmls);
//tr.html(htmls);
//$(tr).html(htmls);
}

//cancle
function cancle(){
var objAttrVals = $("#tbody").find("tr > td").find(".writable");
var tr = objAttrVals.parent().parent();
tr.remove();

}

//update 目前只能修改一条数据，只能选择一条修改一条
function update() {
var tr = '';
var idList = ['ch','email','id','phone'];
tr = $('input:checked').parent().parent();
var obj = {};
var chval = $('input:checked').val();
for (var i=0;i<$(tr).find("td").length;i++) {
var str = $($(tr).find("td")[i]).text();
$(obj).attr(idList[i],str);
}
$(obj).attr("ch",chval);
var str = chval + '-' + obj.email + '-' + obj.id + '-' + obj.phone;
var html='<tr id="'+obj.ch+'">';
html += '<td><input type="checkbox" id="ch" name="ch" class="writable" value="'+obj.ch+'"/></td>';
html += '<td><input type="text" id="email" name="email" class="writable" value="'+obj.email+'"/></td>';
html += '<td><input type="text" id="id" name="id" class="writable" value="'+obj.id+'"/></td>';
html += '<td><input type="text" id="phone" name="phone" class="writable" value="'+obj.phone+'"/>';
html += '<a href ="#" onclick="modsave()">save</a><a href ="#" onclick="modcancle(\'';
html += str;
html += '\')">cancel</a></td>';
html += '</tr>';

$('#'+obj.ch).after(html);
$('#'+obj.ch).remove();
}

//update save
function modsave() {
$("input[type=text]").each(function(){
$(this).addClass("writable");
});
var objAttrVals = $("#tbody").find("tr > td").find(".writable");
var obj = {};
   for(var i=0;i<objAttrVals.length;i++){
    var attrVal = $(objAttrVals[i]).val();
$(obj).attr(objAttrVals[i].id,attrVal);
    }

var htmls = '<tr><td><input type="checkbox" id="ch" name="ch" value="'+obj.ch+'"/>';
htmls += '</td>';
htmls += '<td>';
htmls += obj.email;
htmls += '</td>';
htmls += '<td>';
htmls += obj.id;
htmls += '</td>';
htmls += '<td>';
htmls += obj.phone;
htmls += '</td></tr>';
var tr = objAttrVals.parent().parent();
$('#'+obj.ch).after(htmls);
$('#'+obj.ch).remove();
}

//update cancle
function modcancle(ch) {
var array = ch.split('-');

var objAttrVals = $("#tbody").find("tr > td").find(".writable");
var htmls = '<tr><td><input type="checkbox" id="ch" name="ch" value="'+array[0]+'"/>';
htmls += '</td>';
htmls += '<td>';
htmls += array[1];
htmls += '</td>';
htmls += '<td>';
htmls += array[2];
htmls += '</td>';
htmls += '<td>';
htmls += array[3];
htmls += '</td></tr>';
var tr = objAttrVals.parent().parent();
$('#'+array[0]).before(htmls);
$('#'+array[0]).remove();
}

//delete 目前只能删除已经存在的前三条数据，对于CHECKBOX VALUE应该是从后台自动生成的唯一标识
function del(form) {
var a = new Array();
for (var i=0;i<form.elements.length;i++) {
var e = form.elements[i];
if (e.checked==true && e.type=='checkbox' && e.name) {
a.push(e.value);
}
}

if (a.length==0) {
alert('没有选择！');
return false;
} else {
for (i in a) {
$('#'+a[i]).remove();
}
}
}

//select
function sel(chkallid, chkoneid){
var checkBoxArr = document.getElementsByName(chkoneid);
var selall = document.getElementById(chkallid);

for(var i=0;i<checkBoxArr.length;i++){
checkBoxArr[i].checked = selall.checked;
}

}

jQuery