table动态添加、删除tr

在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类来源于http://blog.csdn.net/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);
}