在Web网页中动态为table添加或删除数据行是很常见的需求，实现这一效果有很多种方法，这里只介绍一种，不过在写这一解决方法的时候我感受到了熟练使用Jquery的重要性。
Html代码：
<style type="text/css">table {border-collapse: collapse;}td {border: 1px solid #000000;padding: 5px 5px;text-align: center;}</style><div><input type="button" id="btnAddTr" onclick="AddTr()" value="添加行"/><input type="button" id="btnSave" onclick="SaveInfo()" value="保存"/><table id="firsttb"><thead><tr><td>姓名</td><td>年龄</td><td>联系方式</td><td>地址</td><td>操作</td></tr></thead><tbody id="datalist"><tr><td>蝈蝈</td><td>18</td><td>18233177777</td><td><input type="text" name="address" value="" /></td><td><a name="removetr" onclick="RemoveTr(this)">删除</a></td></tr><tr><td>果果</td><td>16</td><td>18233188888</td><td><input type="text" name="address" value="" /></td><td><a name="removetr" onclick="RemoveTr(this)">删除</a></td></tr><tr><td>郭郭</td><td>18</td><td>18233199999</td><td><input type="text" name="address" value="" /></td><td><a name="removetr" onclick="RemoveTr(this)">删除</a></td></tr></tbody></table></div>
Jquery代码：
<script type="text/javascript">function AddTr() {//1.【普通写法1】创建一个<tr></tr>并把它加入到datalist//$("<tr><td>新增</td>" +//"<td>16</td>" +//"<td>13067899999</td>" +//"<td><input type=\"text\" name=\"address\" value=\"\"/></td>" +//"<td><a name=\"removetr\" onclick=\"RemoveTr(this)\">删除</a></td></tr>").appendTo("#datalist");//2.【普通写法2】创建一个<tr></tr>并把它加入到datalist//$("#datalist").append("<tr><td>新增</td>" +//"<td>16</td>" +//"<td>13067899999</td>" +//"<td><input type=\"text\" name=\"address\" value=\"\"/></td>" +//"<td><a name=\"removetr\" onclick=\"RemoveTr(this)\">删除</a></td></tr>");//3.【连缀写法1】创建一个<tr></tr>并把它加入到datalist//$("<tr></tr>").append("<td>新增</td>")// .append("<td>16</td>")// .append("<td>13067899999</td>")// .append("<td><input type=\"text\" name=\"address\" value=\"\"/></td>")// .append("<td><a name=\"removetr\" onclick=\"RemoveTr(this)\">删除</a></td>")// .appendTo("#datalist");//4.【连缀写法2】创建一个<tr></tr>并把它加入到datalist$("<tr></tr>").append("<td>新增</td>").append("<td>16</td>").append("<td>13067899999</td>").append("<td><input type=\"text\" name=\"address\" value=\"\"/></td>").append("<td><a name=\"removetr\">删除</a></td>").appendTo("#datalist").find("a[name=removetr]").click(function() {RemoveTr(this);});}function RemoveTr(_this) {var $trNode = $(_this).parent().parent();var textContext = $trNode.find("td:first").text().trim();var flag = confirm("确定删除\"" + textContext + "\"吗？");if (flag) {$trNode.remove();}}function SaveInfo() {if (HaveNullAddress() == "true") {alert("地址不能为空！");return;}var json = FormatDatalistToJson();$.ajax({type: "post",url: "Handler1.ashx",data: { func: "saveInfo", data: json },success:function(data) {var jsonString = eval('(' + data + ')');alert(jsonString.Success);alert(jsonString.Message);}});}function FormatDatalistToJson() {var $trs = $("#datalist tr");var json = '[';$trs.each(function(i, tr) {json += '{';json += '"Name":"' + $(tr).find("td:eq(0)").text() + '",';json += '"Age":"' + $(tr).find("td:eq(1)").text() + '",';json += '"Phone":"' + $(tr).find("td:eq(2)").text() + '",';json += '"Address":"' + $(tr).find("input[name=address]").val() + '"';json += '},';});if (json.length > 0) {json = json.substring(0, json.length - 1);}json += "]";return json;}function HaveNullAddress() {var flag = "false";var addressInputs = $("#datalist input[name=address]");addressInputs.each(function(i, addressInput) {if ($(addressInput).val().trim() == "") {flag = "true";return false;//相当于break;//return; //相当于continue;}});return flag;}</script>
Handler1.ashx后台代码：
代码中所用的JsonHelper类来源于/xiaouncle/article/details/52279060，有需要的同学可以看一下。
public class Handler1 : IHttpHandler{public void ProcessRequest(HttpContext context){context.Response.ContentType = "text/plain";string result = "";string func = context.Request["func"];string data = context.Request["data"];switch (func){case"saveInfo":result = SaveInfo(data);break;default:break;}context.Response.Write(result);}private string SaveInfo(string data){Result result = new Result();try{List<Person> persons = JsonHelper.JsonDeserialize<List<Person>>(data);result.Success = true;result.Message = "序列化成功！";}catch (Exception ex){result.Success = false;result.Message = "序列化失败！";}//return JsonHelper.JsonSerializer(result);return new JavaScriptSerializer().Serialize(result);}}public class Person{public string Name { get; set; }public int Age { get; set; }public string Phone { get; set; }public string Address { get; set; }}public class Result{public bool Success { get; set; }public string Message { get; set; }}
如果在后台使用Dictionary存储返回结果，需要注意：
private string SaveInfo(string data){Dictionary<string, object> dict = new Dictionary<string, object>();try{List<Person> persons = JsonHelper.JsonDeserialize<List<Person>>(data);dict.Add("Success",true);dict.Add("Message", "序列化成功！");}catch (Exception ex){dict.Add("Success", true);dict.Add("Message", "序列化成功！");}//序列化之后的结果为："[{"Key":"Success","Value":true},{"Key":"Message","Value":"序列化成功！"}]"//return JsonHelper.JsonSerializer(dict);//序列化之后的结果为："{"Success":true,"Message":"序列化成功！"}"return new JavaScriptSerializer().Serialize(dict);}
