layui table 方法渲染添加、修改、删除行

以前写过一篇自动渲染和静态表格的动态添加行：
layui table点击按钮添加、删除一行

今天学习别人的方法渲染表格动态添加、修改、删除行。

//表格渲染
var tableId = "dataTable";
var tableIns = table.render({
    elem: "#" + tableId,
    id: tableId,
	data: tbData,
	page: false,
	cols: [[
        {field: "name", minWidth: 150, title: "姓名"},
        {field: "gender", minWidth: 150, title: "性别"},
        {field: "age", minWidth: 150, title: "年龄"},
        {field: "grade", minWidth: 150, title: "年级"},
        {field: 'right', title: '操作', templet: function(d){
			return '移除';
		}}
	]],
	done: function(res, curr, count){
		tbData = res.data;
	}
});

//定义表格操作
var tableActive = {
	//添加行
    addNewRow: function(id, name, gender, age, grade) {
    	//获取表格当前数据
        var oldData = table.cache[tableId];
        //新行数据
        var newRow= {
        	id: id,
        	name: name,
        	gender: gender,
        	age: age,
        	grade: grade
        };
        //将新行插入表格数据中
        oldData.push(newRow);
        //如果原table渲染时指定了数据url
        //重载时需要设置url: null
        //使用新数据重载表格
        tableIns.reload({
            url: null,
            data: oldData
        });
    },
    //删除行
    deleteRow: function() {
        var oldData = table.cache[tableId];
        for(var i=0, row; i < oldData.length; i++){
            row = oldData[i];
            //在table工具栏监听时删除对应行dom结构
            //行不存在则从数据中删除
            if(!row || !row.id){
                oldData.splice(i, 1);    //删除一项
            }
            continue;
        }
        tableIns.reload({
            url: null,
            data : oldData
        });
    },
    //更新数据
    updateRow: function(data) {
        //更新表数据
        var oldData = table.cache[tableId];
        for(var i=0, row; i < oldData.length; i++){
            row = oldData[i];
            if(row.id == data.id){
                $.extend(oldData[i], data);
                continue;
            }
        }
        tableIns.reload({
            url: null,
            data : oldData
        });
    }
};

 //监听工具条，删除行
table.on("tool("+tableId+")", function (obj) {
	var data = obj.data, event = obj.event, tr = obj.tr; //获得当前行 tr 的DOM对象;
	console.log(data);
	switch(event){					
		case "del":
			layer.confirm('真的删除行么？', function(index){
				obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
				layer.close(index);
				tableActive.deleteRow();
			});
			break;						
	}
});

//添加行
$("#addRow").on("click", function() {
	tableActive.addNewRow(3, "James", "女", 15, 9);
});

修改行包含table表单编辑。请参考原文