js 封装的自动创建表格的相关操作

因为要做一个动态输入的表格，现在积累一下资料，在网上找了一些资料，经过总结是使用更加方便些，谁有更好的插件和封装的东西，请大家分享一下。

<script type="text/javascript">
         var currentActiveRow; //选中的颜色
        var customTable = function() { };
        customTable.prototype = {
            init: {
            ajaxUrl: "",
            tId: "tbody",
            delMsg: "确认要删除吗?"
                
            },
            ajax: function(params, callback) {
                var that = this;
                $.ajax({
                    type: "get",
                    cache: false,
                    dataType: "json",
                    url: that.init.ajaxUrl,
                    data: params,
                    success: arguments[1] || function() { },
                    error: arguments[2] || function() {
                        if (window.console) {
                            console.log("error log: " + data.responseText);
                        }
                    }
                });
            },
            initData: function() {
                var that = this;
                var params = {
                    ajaxMethod: "getbookbag",
                    random: Math.random()
                };
                var suc = function(data) {
                    if (data.isSuccess === 1) {

} else {

}
                };
                var err = function() {
                };
                ttable.ajax(params, suc, err);
            },
            addRow: function() {
                var tbody = document.getElementById(this.init.tId);
                var rowNo = tbody.rows.length;
                tbody.insertRow(rowNo);
                tbody.rows[rowNo].insertCell(0);
                tbody.rows[rowNo].cells[0].appendChild(document.createTextNode(rowNo + 1)); //innerText = "0001";//innerText 和innerHTML
                tbody.rows[rowNo].insertCell(1);
                tbody.rows[rowNo].cells[1].innerHTML = "<input name='radioRMS' type='radio' value='1'></input>";
                tbody.rows[rowNo].insertCell(2);
                tbody.rows[rowNo].cells[2].innerHTML = "<input name='checkboxRMS' type='checkbox' value='1'></input>";
                tbody.rows[rowNo].insertCell(3);
                tbody.rows[rowNo].cells[3].innerHTML = "<input name='descript' type='text' value='des" + (rowNo + 1) + "'></input>";
                tbody.rows[rowNo].insertCell(4);
                tbody.rows[rowNo].cells[4].innerHTML = "<input type='button' value='删除' onclick='ttable.deleteRow(event)'/><input type='button' value='编辑' onclick='ttable.editRow(event)'/><a href='javascript:void(0)' onclick='ttable.moveUp(this)'>↑</a> &nbsp;&nbsp;<a href='javascript:void(0)' onclick='ttable.moveDown(this)'>↓</a>";
                tbody.rows[rowNo].onclick = ttable.changeActiveRow;
            },
            deleteRow: function(eve) {
                if (confirm(this.init.delMsg)) {
                    element = window.event ? window.event.srcElement : eve.target;
                    var rowNo = element.parentNode.parentNode.rowIndex;
                    var tbody = document.getElementById(this.init.tId);
                    tbody.deleteRow(rowNo - 1);
                }

},
            editRow: function() {
                var element = window.event ? window.event.srcElement : eve.target;
                alert(element);
            },
            changeActiveRow: function() { //设置选中行的背景色

eve = arguments[0];
            element = window.event ? window.event.srcElement : eve.target;
            obj = element.parentNode;
            while (obj && obj.tagName != "TR") {
                obj = obj.parentNode;
                if (currentActiveRow)
                   currentActiveRow.style.backgroundColor = "";
                currentActiveRow = obj;
                currentActiveRow.style.backgroundColor = "Red";

}

},
            cleanWhitespace: function(element) {
                //遍历element的子节点
                for (var i = 0; i < element.childNodes.length; i++) {
                    var node = element.childNodes[i];
                    if (node.nodeType == 3 && !/\s/.test(node.nodue))
                        node.parentNode.removeChild(node);
                } //使表格行上移，接收参数为链接对象
            },
            moveUp: function(_a) {
            var _table = document.getElementById(this.init.tId);
                ttable.cleanWhitespace(_table);
               //var _row = _a.parentNode.parentNode;
                 var _row = currentActiveRow;
                //如果不是第一行 交换顺序
                if (_row.previousSibling)
                    ttable.swapNode(_row, _row.previousSibling);
            },
            moveDown: function(_a) {
            var _table = document.getElementById(this.init.tId);
                ttable.cleanWhitespace(_table);
                //通过链接对象获取表格行的引用
                //var _row = _a.parentNode.parentNode;
                var _row = currentActiveRow;
                //如果不是最后一行 则与下一行交换顺序
                if (_row.nextSibling)
                    ttable.swapNode(_row, _row.nextSibling);
            },
            swapNode: function(node1, node2) {
                var _parent = node1.parentNode;
                var _t1 = node1.nextSibling;
                var _t2 = node2.nextSibling;
                //将node2插入到原来node1的位置
                if (_t1)
                    _parent.insertBefore(node2, _t1);
                else
                    _parent.appendChild(node2);
                //将node1插入到原来ndoe2的位置
                if (_t2)
                    _parent.insertBefore(node1, _t2);
                else
                    _parent.appendChild(node1);

}

}

var ttable = new customTable();
    
         
    </script>

其中ＨＴＭＬ中的：

　　　　 <table border="1" id="tableSpan">
        <thead id="thead">
            <tr onclick="ttable.changeActiveRow(this);">
                <td>
                    序号
                </td>
                <td>
                    缺省
                </td>
                <td>
                    启用
                </td>
                <td>
                    选项内容
                </td>
                <td>
                    操作
                </td>
            </tr>
        </thead>
        <tbody id="tbody">
        </tbody>
    </table>
    <button onclick="ttable.addRow()" value="添加">
        添加</button>
    <button onclick="ttable.moveUp()" value="添加">
        ↑</button>
    <button onclick="ttable.moveDown()" value="添加">
        ↓</button>