javaScript之表格操作<一:新增行>

DOM表格系列操作

　

/**
 * 添加表格行
 * @function 本接口可以用于:在表格tbody部分新增任意数量,任意样式的行HTML结构;
 * @name addTableLines
 * @author zengtai
 * @date 2017-07-29
 * @dependce 支持IE 8.0及以上;不依赖于其他jaavscript库
 *
 * @param TableId[指定类型:string]
 * @param TdOptions[tds配置项:td单元格内部需要填充的html元素或者数据等；格式见下面tdOptions的Demo] 
 * @param tdNumber[新增行的单元格数:指定类型:number]
 * @param lineNumber[新增行数:指定类型:number]
 *
 * @notice 本函数仅对tbody部分进行操作。
 * @notice 为了再次确认调用方的td需要的的数目，所以TdOptions.number的数据必须与tdNumber保持一致
 */
//     tdOptions Demo
//  var tdOptions = {
//     number:2,//td单元格的数量
//     tds:["<input type='text' class='form-control'>","<a href='#' class='btn btn-danger'>删除</a>"]
// }
function addTableLines(tableId, TdOptions, tdNumber, lineNumber) {
    //检验参数齐全性
    if (arguments.length != 4 || (typeof(tableId) != 'string') || (typeof(TdOptions) != 'object') || (typeof(tdNumber) != 'number') || (typeof(lineNumber) != 'number')) {
        throw new Error("Arguments is not qualified!");
    }
    //检验TdOptions与配置项TdOptions.number的数据是否一致，如果不一致，说明有问题。
    if (TdOptions.number != tdNumber) {
        throw new Error("TdOptions.number 与 tdNumber的数据不一致！");
    }

    var tableNode = document.getElementById(tableId);
    var tbody = tableNode.getElementsByTagName('tbody')[0];

    for (var i = 0; i < lineNumber; i++) { //行
        var newLine = document.createElement("tr");

        for (var j = 0; j < tdNumber; j++) { //行内单元格
            var newTd = document.createElement("td");
            newTd.innerHTML = TdOptions.tds[j]; //此方法支持IE8.0及其以上
            newLine.insertBefore(newTd, null); //插入后成为最后一行内单元格个子节点    
        }

        tbody.appendChild(newLine); //插入后成为tbody的最后一个行子节点    
    }
    return tableNode;
}

　　效果图:

　　点击增加后: