Javascript Table操作-优快云博客

本文链接：https://blog.youkuaiyun.com/Cool_xiaocao/article/details/83889743


// 取得页面元素
function GetObj(objName) {
    if (document.getElementById) {
        return eval('document.getElementById("' + objName + '")')
    }
    else {
        return eval('document.all.' + objName)
    }
}

//动态添加表格
function addTable() {
    var dytable = GetObj("dyTable");
    //创建Table对象
    var tableNode = document.createElement("table");

    /* 设置 table 属性 */
    tableNode.id = "otable";
    tableNode.border = "1";
    tableNode.cellPadding = "1";
    tableNode.cellSpacing = "1";


    if (!dytable.hasChildNodes()) {

        dytable.appendChild(tableNode);
    }

    for (var i = 0; i < 6; i++) {
        //添加行
        var newRow = tableNode.insertRow(-1);

        //添加第一列
        var newCell = newRow.insertCell(-1);
        newCell.width = "100";
        newCell.innerHTML = "Line " + (i + 1);

        //添加删除按钮
        var delCell = newRow.insertCell(-1);
        delCell.width = "100";
        delCell.innerHTML = "<input type=\"button\" name=\"delrow\" value=\"删除\" id=\"delrow\" onclick=\"delRowEvent(this)\" />";
    }
}

//动态复制行
function cloneRow() {
    var tableNode = document.getElementById("otable");
    if (tableNode) {
       //获取要复制的行
        var tableRow = tableNode.rows[tableNode.rows.length - 1];
        var newRow = tableRow.cloneNode(true);
        //在tableRow的前面添加一行
        tableRow.parentNode.insertBefore(newRow, tableRow);
        //在tableRow的后面添加一行
//        tableRow.parentNode.insertBefore(newRow, tableRow.nextSilbing);
    }
    else {
        alert("没有找到表格");
    }
}

//动态添加行
function addRow() {
    var tableNode = document.getElementById("otable");
    if (tableNode) {
        var tableRow = tableNode.rows[tableNode.rows.length - 1];
        var newRow = tableRow.cloneNode(false);
        var newCell_1 = newRow.insertCell(0);
        var newCell_2 = newRow.insertCell(1);

        /* Table 列的内容 */
        newCell_1.innerHTML = "Cell_1";
        newCell_2.innerHTML = "Cell_2";

        //添加行
        tableRow.parentNode.insertBefore(newRow, tableRow);
    }
    else {
        alert("没有找到表格");
    }
}

//删除表格行
function delRowEvent(obj) {
    if (confirm("确认要删除吗？")) {
       //获取行索引
        var element = obj.parentNode.parentNode.rowIndex;
        GetObj("otable").deleteRow(element);
    }

}


<body>
    <div id="dyTable"></div>
    <input type="button" id="addtb" value="动态生成表格" onclick="addTable()" />
    <br />
    <input type="button" id="clonerow" value="动态复制行" onclick="cloneRow()" />
    <br />
    <input type="button" id="addRow" value="动态添加一行" onclick="addRow()" />
</body>

[img]http://dl.iteye.com/upload/attachment/466121/a02942d3-00c2-3819-9462-252cee6e3674.gif[/img]