js 表格动态新增或删除行、列

作者: 奥利奥蘸墨水 | 来源:发表于2020-06-29 23:35 被阅读0次

js 表格动态新增或删除行、列
ElementUI el-table表格动态添加一行、删除一行
读《电脑第三课》
BootStrap table动态增删改表格内数据
[HTML表格]2.编程练习(2-8)
学习小组Day6笔记—小森
原生vue实现表格的编辑
vue表格多选、vue动态显示隐藏表格列、vue动态多列排序
前端开发第学习第十四天
bootstrap-table remove record

html代码。

<!DOCTYPE html>
<html>
<script src="./js1.js"></script>
<div style="overflow: auto; height: 350px; width: 860px; padding: 10px;">
    <table cellpadding="1" id="example_table" cellspacing="0" bordercolor="#000000" border="1" style="text-align: center">
        <tr id="trHeader">
            <td>
                test case 1
            </td>
        </tr>
        <tr>
            <td>
                1
            </td>
        </tr>
    </table>
    <table cellpadding="1" cellspacing="0" bordercolor="#000000" border="0.1" style="text-align: center">
        <tr>
            <td>
                <input type="button" name="Submit" value="新增行" onclick="test1()" />
            </td>
            <td>
                <input type="button" name="Submit" value="新增列" onclick="test2()" />
            </td>
            <td>
                <input type="button" name="Submit" value="删除行" onclick="test3()" />
            </td>
            <td>
                <input type="button" name="Submit" value="删除列" onclick="test4()" />
            </td>
            <td>
                <input name='txtTRLastIndex' type='hidden' id='txtTRLastIndex' value="1" />
                <input name='txtTDLastIndex' type='hidden' id='txtTDLastIndex' value="4" />
            </td>
        </tr>
    </table>
</div>

</html>

js代码。

function test1() {
    let uint_table = document.getElementById("example_table");
    let rows = uint_table.rows.length;
    let cols = uint_table.rows.item(0).cells.length;
    
    let new_tr = uint_table.insertRow(rows);
    new_tr.id = "row" + (rows + 1);

    for (let i = 0; i < cols; i++) {
        new_tr.insertCell(0).innerHTML = "haha" + (rows + 1);
    }
}

function test2() {
    let uint_table = document.getElementById("example_table");
    let row_num = uint_table.rows.length;
    let col_num = uint_table.rows.item(0).cells.length;

    for (let i = 0; i < row_num; i++) {
        let new_td = uint_table.rows[i].insertCell(col_num);
        new_td.id = "col" + (i + 1);
        new_td.innerHTML = "hehe" + i;
    }
}

function test3() {
    let uint_table = document.getElementById("example_table");
    let row = document.getElementById("row3");
    let i = row.rowIndex;

    console.log(i);
    uint_table.deleteRow(i);
}

function test4() {
    let uint_table = document.getElementById("example_table");
    let row_num = uint_table.rows.length;

    let col_no = 3;

    for (let i = 0; i < row_num; i++) {
        uint_table.rows[i].deleteCell(col_no);
    }
}