自己利用jQuery框架写的一个Table类！

///<reference path="jquery-1.8.3.js"/>
/*
    1、Table类根据用户定义的表格结构在内存中创建一个json对象;
    2、表格的样式由用户在<table ......>...</table>中自己定义;
       Example:
       <table id="mytable" class="ListTable">
        <thead>
            <tr>
                <th style="width:15%">Column1</th>
                <th style="width:15%">Column2</th>
                <th>Column3</th>
            </tr>
        </thead>
        <tbody>
            <tr>//此行的index=0，此行默认为数据显示行
                <td><span class="class">{FieldName1}</span></td>
                <td><img src="{ImageUrl}" alt="" title="{title}" style="border:none;height:16px;width:16px;"/></span></td>
            </tr>
            <tr>//此行的index=1,若将EditRow设置为1，此行将作为编辑行
                <td><input id="firstname" type="text" value="{firstname}"/></td>
                <td><input type="checkbox" id="isMan" value="{sex}"/></td>
            </tr>
         </tbody>
       </table>
    3、表格要填充的数据以{FieldName}形式表示;
    4、表格接受的数据格式为json数据格式;
    5、使用本js文件之前必须先引入jquery主程序文件
*/
var Table = function(TableId) {
    ///<summary>根据表格Id创建一个jQuery对象</summary>
    ///<param name="TableId">表格Id</param>
    ///<returns>jQuery对象</returns>
    this.obj = document.getElementById(TableId).cloneNode(true);
    this.id = this.obj.id;                  /*表格的Id*/
    this.dataSource = null;                 /*表格数据集*/
    this.key = "";                          /*表格数据的关键字-string*/
    this.RowCount = 0;                      /*表格全部的数据行-int*/
    this.LastRowIndex = -1;                 /*表格中最后行的索引-int*/
    this.outerHTML = this.obj.outerHTML;    /*表格结构的html字符串-string*/
    this.rows = this.obj.rows;              /*表格数据行-object Array*/
    this.tHeader = this.obj.tHead;          /*表头区-object*/
    this.tBody = this.obj.tBodies;          /*表格数据区-object*/
    this.DataRows = this.obj.tBodies[0].rows; /*表格第一数据行-object*/
    this.HeaderRows = this.obj.tHead.rows;  /*表头行-object*/
    this.tFooter = this.obj.tFoot;          /*表尾区-object*/
    this.EditRowIndex = -1;                 /*编辑行索引*/
    this.ItemRow = 0;                       /*表格数据行的哪一行作为显示行-int*/
    this.EditRow = -1;                      /*表格数据行的哪一行作为编辑行-int*/
    this.Style = {
        TableClass: this.obj.className,     /*表格的样式类名称*/
        NormalRowClass: this.DataRows[0] ? this.DataRows[0].className : "",/*1,3,5...行样式类名称*/
        AlternateRowClass: this.DataRows[1] ? this.DataRows[1].className : ""/*2,4,6...行样式类名称*/
    };
    this.ShowCheckColumn = true;            /*是否在表格的最左边显示一checkbox列*/
    /*根据行号及行数据返回一个新行*/
    this.RowDataBind = function(rowIndex, rowData) {
        if (!this.DataRows[this.ItemRow]) { return; }
        if (this.key == "") { return; }
        var rowStr = this.DataRows[this.ItemRow].outerHTML;
        var paras = rowStr.match(/\{([A-Za-z0-9]*)\}/g);
        var newRow = rowStr;
        var cell = null;
        var keyValue = eval("rowData." + this.key);
        var rowId = this.id + "_row_" + keyValue;
        var j = 0;
        if (this.ShowCheckColumn) {
            var cell = $("<td></td>");
            var chkbox = $("<input type='checkbox'/>");
            $(cell).attr({ "id": rowId + "_" + j });
            $(cell).css({ "width": "20px" });
            j++;
            $(chkbox).attr({ "id": this.key + "_" + rowIndex, "name": this.key, "value": keyValue });
            $(cell).append(chkbox);
        }
        if (this.EditRowIndex == rowIndex) {
            if (this.DataRows[this.EditRow]) {
                newRow = this.DataRows[this.EditRow];
            }
        }
        for (var m = 0; m < paras.length; m++) {
            var str = paras[m].replace(/\{/g, "").replace(/\}/g, "");
            newRow = newRow.replace(new RegExp(paras[m], "gm"), eval("rowData." + str));
            var RE = new RegExp();
        }
        var row = $(newRow);

        $(row).attr("id", rowId).show();
        if (this.ShowCheckColumn) {
            $(row).prepend(cell);
        }
        if (rowIndex % 2 == 1 && this.AlternateRowClass != "") { $(row).find("tr").attr("class", this.AlternateRowClass); }
        var inputs = $(row).find(":input");
        for (var j = 0; j < inputs.length; j++) {
            var name = $(inputs[j]).attr("name");
            var id = $(inputs[j]).attr("id");
            var type = $(inputs[j]).attr("type");
            /*设置name和id属性*/
            switch (type) {
                case "checkbox":
                    if (!name && id) {
                        $(inputs[j]).attr("name", id).attr("id", id + "_" + rowIndex);
                    }
                    if (name && !id) {
                        $(inputs[j]).attr("id", name.replace(/\$/g, "_") + "_" + rowIndex);
                    }
                    break;
                default:
                    if (!name && id) {
                        $(inputs[j]).attr("name", id).attr("id", id + "_" + rowIndex);
                    }
                    if (!id && name) {
                        $(inputs[j]).attr("id", name.replace(/\$/g, "_") + "_" + rowIndex);
                    }
                    break;
            }
        }
        var tds = $(row).find("td");
        for (j; j < tds.length; j++) {
            $(tds[j]).attr("id", rowId + "_" + j);
        }
        var elements = $(row).find("*").each(function() {
            display = $(this).attr("show");
            hidden = $(this).attr("hide");
            if (display) {
                display = display.toLowerCase();
                $(this).removeAttr("show");
                if (display == "false") {
                    $(this).hide();
                }
            }
            if (hidden) {
                hidden = hidden.toLowerCase();
                $(this).removeAttr("hide");
                if (hidden == "true") {
                    $(this).remove();
                }
            }
        });
        return row;
    };

    /*用新的数据替换原来的行数据*/
    this.UpdateRow = function(rowData) {
    ///<summary>
    ///用新的数据替换原来的行数据
    ///</summary>
    ///<param name="rowData">打算更新的行数据</param>
    ///<returns>无返回值</returns>
        var rows = $("#" + this.id).find("tr");
        for (var i = 0; i < rows.length; i++) {
            var rowid = this.id + "_row_" + eval("rowData." + this.key);
            if ($(rows[i]).attr("id") == rowid) {
                var newRow = this.RowDataBind(i, rowData);
                $(rows[i]).replaceWith(newRow);
                break;
            }
        }
        for (var i = 0; i < this.dataSource.length; i++) {
            if (eval("this.dataSource[i]." + this.key) == eval("rowData." + this.key)) {
                this.dataSource.splice(i, 1, rowData);
                break;
            }
        }

    };

    /*一次更新多行*/
    this.UpdateRows = function(data) {
    ///<summary>
    ///用新的数据更新多行数据
    ///</summary>
    ///<param name="rowData">打算更新的行数据</param>
    ///<returns>无返回值</returns>
        for (var i = 0; i < data.length; i++) {
            this.UpdateRow(data[i]);
        }
    };

    /*删除行*/
    this.DeleteRow = function(keyValue) {
        var rowId = this.id + "_row_" + keyValue;
        $("#" + rowId).remove();
        this.RowCount--;
        for (var i = 0; i < this.dataSource.length; i++) {
            var value = eval("this.dataSource[i]." + this.key);
            if (keyValue == value) {
                this.dataSource.splice(i, 1);
            }
        }
    };
    /*删除多行*/
    this.DeleteRows = function(_data) {
        for (var i = 0; i < _data.length; i++) {
            var id = eval("_data[i]." + this.key);
            this.DeleteRow(id);
        }
    };
    /*添加新行到表格数据区末尾*/
    this.AppendRow = function(rowData) {
        var newRow = this.RowDataBind(this.LastRowIndex + 1, rowData);
        var theBody = $("#" + this.id).find("tbody");
        $(theBody).append(newRow);
        this.LastRowIndex++;
        this.RowCount++;
        this.dataSource.push(rowData);
    };
    /*添加多行到表格数据区末尾*/
    this.AppendRows = function(rowDatas) {
        for (var i = 0; i < rowDatas.length; i++) {
            this.AppendRow(rowDatas[i]);
        }
    };
    /*将数据绑定到表格*/
    this.DataBind = function(data) {
        this.dataSource = data;
        if (!this.DataRows[this.ItemRow]) { return; }
        if (this.ShowCheckColumn) {
            var headRows = $(this.HeaderRows).clone();
            var headRow = $(this.HeaderRows[0]).clone();
            var rowspan = this.HeaderRows.length;
            var newColumn = $("<th style='width:20px'><input type='checkbox' οnchange=\"CheckAll('" + this.key + "',this)\" οnclick=\"this.blur();\"/></th>");
            if (rowspan > 1) {
                $(newColumn).attr("rowspan", rowspan);
            }
            $(headRow).prepend(newColumn);
            $("#" + this.id).find("thead").html("").append(headRow);
        }
        var rowStr = this.DataRows[this.ItemRow].outerHTML;
        var theBody = $("#" + this.id).find("tbody");
        $(theBody).html("");
        var paras = rowStr.match(/\{([A-Za-z0-9]*)\}/g);
        this.LastRowIndex = -1;
        this.RowCount = 0;
        for (var i = 0; i < data.length; i++) {
            $(theBody).append(this.RowDataBind(i, data[i]));
            this.RowCount++;
            this.LastRowIndex++;
        }
    };

    this.CheckedRow = function() {
    ///<summary>
    ///返回选择的行keyValue
    ///</summary>
    ///<returns>返回的字符串格式如:'2,3,6,9'</returns>
        var CheckBoxs = $("#" + this.id).find(":checkbox[name='" + this.key + "']");
        var r = "";
        for (var i = 0; i < CheckBoxs.length; i++) {
            if ($(CheckBoxs[i]).attr("checked") != undefined) {
                if (r == "") {
                    r = $(CheckBoxs[i]).val();
                } else {
                    r += "," + $(CheckBoxs[i]).val();
                }
            }
        }
        return r;
    };
    /*清除表格数据区*/
    this.Clear = function() {
        $("#" + this.id).find("tbody").html("");
    };
    /*返回某行的数据*/
    this.GetRowData = function(keyValue) {
    ///<summary>
    ///返回某行的数据
    ///</summary>
    ///<param name='keyValue'>关键字段的值</param>
    ///<returns>object</returns>
        var d = null;
        for (var i = 0; i < this.dataSource.length; i++) {
            var value = eval("this.dataSource[i]." + this.key);
            if (value == keyValue) {
                d = this.dataSource[i];
                break;
            }
        }
        return d;
    };
};

/*
表格CheckBox列选择函数
    key:表示表格的数据key字段名
    o:发起事件的CheckBox对象
*/
function CheckAll(key, o) {
    if (o) {
        if (!$(o).attr("checked")) {
            $("input[name='" + key + "']").removeAttr("checked");
        } else {
            $("input[name='" + key + "']").attr("checked", "checked");
        }
    }
}

用法：

1、初始化对象：var mytable = new Table("mytable");mytable.key="id";

2、填充数据：用jquery的ajax取得json数据，然后执行mytable.DataBind(json数据);

3、更新表格数据:mytable.UpdateRow(json);或者mytable.UpdateRows(array);

4、添加行:mytable.AppendRow(json);或mytable.AppendRows(array);

5、删除行:mytable.DeleteRow(json);或者mytable.DeleteRows(array);

6、取选中行的关键值:mytable.CheckedRow();

7、对某行编辑:mytable.EditRowIndex=n;mytable.DataBind(data);