jQurey代码部分:
<script type="text/javascript"> var flag = 0; //添加新行 function addRow() { var nrow = "<tr><td><input name='hideid' type='hidden' value='' /><input name='username' type='text' value='' size='15' maxlength='15' /></td><td><select name='seltype' id=seltype1><option value='Text'>文本框</option><option value='textarea'>多行文本区</option><option value='Select'>下拉框</option><option value='Radio'>单选框</option><option value='Checkbox'>复选框</option></select></td><td><span class='heb' name='buttonspan'><input value='添加' onclick='addData(this)' type='button' class='se_buton'/> <input value='取消' type='button' onclick='deleteNewRow(this)' class='se_buton'/></span></td></tr>"; if (flag == 0) { $('#attributetable').append(nrow); flag = 1; } } //添加新行中的数据到后台 function addData(obj) { var trobj = $(obj).parents('tr'); var username = $(trobj).find(':text[name=username]').val(); var seltype = $(trobj).find('select[name=seltype]').val(); $.post("SupplyAJAX.aspx", { username: username, seltype: seltype, type: "add" }, function (data) { if (data.toString() != "0") { $(trobj).find(':hidden[name=hideid]').val(data.toString()); changeDisable(obj, 0); } else { deleteNewRow(obj); alert('添加失败'); } }); flag = 0; } //更新行 function updData(obj) { var trobj = $(obj).parents('tr'); var id = $(trobj).find(':hidden[name=hideid]').val(); var username = $(trobj).find(':text[name=usrname]').val(); var seltype = $(trobj).find('select[name=seltype]').val(); $.post("SupplyAJAX.aspx", { id: id, username: username, seltype: seltype, type: "update" }, function (data) { if (data.toString() != "0") { changeDisable(obj, 0); } else { alert('更新失败'); } }); } //删除新行 function deleteNewRow(obj) { $(obj).parents('tr').replaceWith(''); flag = 0; } //删除数据库中的行 function deleteRow(obj) { var trobj = $(obj).parents('tr'); var id = $(trobj).find(':hidden[name=hideid]').val(); $.post("SupplyAJAX.aspx", { id: id, type: "delete" }, function (data) { if (data.toString() != "0") { $(obj).parents('tr').replaceWith(''); } else { alert('删除失败'); } }); } //改变编辑状态 function changeDisable(obj, type) { var trobj = $(obj).parents('tr'); if (type == 0) { $(trobj).find(':text').attr('disabled', 'disabled'); $(trobj).find('select').attr('disabled', 'disabled'); $(trobj).find('span[name=buttonspan]').html("<input name='gx' value='更新' type='button' onclick='changeDisable(this,1)' class='se_buton'/> <input value='删除' type='button' name='qx' onclick='deleteRow(this)' class='se_buton' />"); } if (type == 1) { $(trobj).find(':text').attr('disabled', ''); $(trobj).find('select').attr('disabled', ''); $(trobj).find('span[name=buttonspan]').html("<input name='gx' value='确定' type='button' onclick='updData(this)' class='se_buton'/> <input value='取消' type='button' name='qx' onclick='changeDisable(this,0)' class='se_buton' />"); } } </script>
HTML代码部分:
<body> <table id="attributetable"> </table> <div class=" heb"><input value="增加一行" type="button" onclick='addRow()' class="se_buton"/> </div> </body>
SupplyAJAX类
public partial class SupplyAJAX : System.Web.UI.Page { static List<UserModel> UmList = new List<UserModel>(); protected void Page_Load(object sender, EventArgs e) { switch (Request.QueryString["type"]) { case "add": Add(); break; case "update": Update(); break; case "delete": Delete(); break; } Response.End(); } private string Add() { UserModel um = new UserModel(); um.Id = UmList.Count + 1; //自动为ID加1 um.Username = Request.Form["username"]; um.Seltype = Request.Form["seltype"]; UmList.Add(um); return um.Id.ToString(); } private string Update() { int id = int.Parse(Request.QueryString["id"]); for (int i = 0; i < UmList.Count; i++) { if (id == UmList[i].Id) { UmList[i].Username = Request.Form["username"]; UmList[i].Seltype = Request.Form["seltype"]; return UmList[i].Id.ToString(); } } return "0"; } private string Delete() { int id = int.Parse(Request.Form["id"]); for (int i = 0; i < UmList.Count; i++) { if (id == UmList[i].Id) { UmList.Remove(UmList[i]); return UmList[i].Id.ToString(); } } return "0"; } }
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。