Javascript 动态创建表格(还能删除行列)

最新推荐文章于 2024-08-08 16:36:35 发布

永远爱好写程序

最新推荐文章于 2024-08-08 16:36:35 发布

阅读量974

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/limlimlim/article/details/8548572

版权

Javascript 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>动态创建表格(还能删除行列)</title>
    <style type="text/css">
            body,div
            {
                margin:0;
                padding:0;
                font-size:14px;
            }
            table
            {
                margin:0 auto;
            }
            td
            {
                border:1px solid green;
                text-align:center;
            }
    </style>
    <script type="text/javascript">
        //动态创建表格
        function createTable() {
            var divMain = document.getElementById("divMain");
            removeAllChild(divMain);        //删除上次添加的表格
            var myTable = document.createElement("table");
            myTable.id = "DynamicTable";
            var myRow = document.getElementById("myRow").value;
            var myCol = document.getElementById("myCol").value;

            var trNode;
            var tdNode;
            var strTmp;
            for (var i = 1; i <= myRow; i++) {
                trNode = myTable.insertRow(-1);
                for (var j = 1; j <= myCol; j++) {
                    strTmp ="第"+ i + "行,第"+ j + "列";
                    tdNode = trNode.insertCell(-1);
                    tdNode.innerHTML = "<a href='javascript:void(0);'>" + strTmp + "</a>";
                }
            }

divMain.appendChild(myTable); //把表格添加到div中

//event.srcElement.disabled = "true"; //添加按钮禁用
}

        //删除指定节点下的所有子节点
        function removeAllChild(nodeObj) {
            while (nodeObj.hasChildNodes()) {
                nodeObj.removeChild(nodeObj.firstChild);
            }
        }

        //删除行
        function DeleteRow() {
            var rowNum = document.getElementById("delRow").value;
            var tbl = document.getElementById("DynamicTable");

            if (tbl == null) {
                alert('请先创建表格');
                return;
            }

            if ((rowNum <= tbl.rows.length) && (rowNum > 0)) {
                tbl.deleteRow(rowNum-1);
            }
            else {
                alert('请输入一个有效的行!');
            }
        }

        //删除列
        function DeleteCol() {
            var colNum = document.getElementById("delCol").value;
            var tbl = document.getElementById("DynamicTable");

            if (tbl == null) {
                alert('请先创建表格');
                return;
            }

            if(tbl.rows.length<=0) {
                alert('表格不存在行');
                return;
            }
            if ((colNum <= tbl.rows[0].cells.length) && (colNum > 0)) {
                for (var i = 0; i < tbl.rows.length; i++) {
                    tbl.rows[i].deleteCell(colNum - 1);
                }
            }
            else {
                alert('指定列不存在');
            }
        }
    </script>
</head>
<body>
    请输入行数<input type="text" id="myRow" />,请输入列数<input type="text" id="myCol" /><br />
    <input type="button" value="创建表格" οnclick="createTable()" /><br />
    <input type="text" id="delRow" /><input type="button" value="删除行" οnclick="DeleteRow()" /><br />
    <input type="text" id="delCol" /><input type="button" value="删除列" οnclick="DeleteCol()" /><br />
    <div id="divMain">

    </div>
</body>
</html>