DHTML技术演示---动态创建表格、删除表格（详细的解释，适合初学者）

本文链接：https://blog.csdn.net/weixin_37720904/article/details/71862494

详细的演示了，创建单个单元格的表格，创建固定行固定列数的表格、创建用户输入个数的行数。列数表格、删除行、删除列。
图形界面如下（不是很好看，但是技术点都有适合初学者，有详细的解释）
这里写图片描述
主要用到是以下几个方法和具体的编程思路来实现

insertRow 在表格中创建新行(tr)，并将行添加到 rows 集合中
insertCell 在表格行(tr)中创建新单元格，并将单元格添加到 cells 集合中。
deleteRow 从表格及 rows 集合中删除指定行(tr)。
deleteCell 从表格行及 cells 集合中删除指定单元格(td)。

有两个差不多的版本，一个我自己写的，一个老师的。
我自己写的版本

<!DOCTYPE html>
<html>
  <head>
    <title>tabkel.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
        table{
            border: 1px solid #8600ff;
            border-collapse:collapse;
            width: 380px;
        }
        td{
            border: 1px solid #ff8f59;
            padding: 5px;
        }
    </style>
    <script type="text/javascript">// 创建表格的方法
        //创建一个单元格的方法
        function createTable1(){
            // 创建一个table元素
            var oTableNode = document.createElement("table");
            // insertRow 在表格中创建新行(tr)，并将行添加到 rows 集合中
            var oTrNode = oTableNode.insertRow();
            // insertCell 在表格行(tr)中创建新单元格，并将单元格添加到 cells 集合中。
            var oTdNode = oTrNode.insertCell();
            oTdNode.innerText = "你好，我是添加的表格！";
            //在把table 加到 div 那儿去
            var oDivNode = document.getElementById("div1");
            oDivNode.appendChild(oTableNode);
        }
        //创建一个num1行num2列的单元格的方法
        function createTable2(num1,num2){
            // 创建一个table元素
            var oTableNode = document.createElement("table");
            // insertRow 在表格中创建新行(tr)，并将行添加到 rows 集合中
            // insertCell 在表格行(tr)中创建新单元格，并将单元格添加到 cells 集合中。
            for(var i=0;i<num1;i++){
                var oTrNode = oTableNode.insertRow(i);
                for(var j=0;j<num2;j++){
                    var oTdNode = oTrNode.insertCell(j);
                    oTdNode.innerText = "单元格"+(i+1)+"-"+(j+1);
                }
            }
            //在把table 加到 div 那儿去
            var oDivNode = document.getElementById("div2");
            oDivNode.appendChild(oTableNode);

            //为下面的删除表格功能实现，给当前表格添加一个id属性
            //oTableNode.id="tableid";//法1
            oTableNode.setAttribute("id", "tableid");//法2
        }
        function createTable3(){
            // 拿到表格的行数和列树,
            var rowNum = document.getElementsByName("rowNum")[0].value;
            var colNum = document.getElementsByName("colNum")[0].value;
            // 用户输入的数据，可能会出现非法数据。所以要防范
            //alert(typeof(colNum));--- string 用户输入数据类型为
            var num1=parseInt(rowNum);
            var num2=parseInt(colNum);
            try {
                if(isNaN(num1)){
                    alert("输入的行数格式错误，请重输入！");
                    return;
                }
                if(isNaN(num2)){
                    alert("输入的列数格式错误，请重输入！");
                    return;
                }
            } catch (e) {
                alert("不异常...");
                    return;
            }
            createTable2(num1, num2);
        }
    </script>
    <script type="text/javascript">// 删除表格的方法
        //删除第几行！ 
        //deleteRow 从表格及 rows 集合中删除指定行(tr)。
        function delRow(){
            // 首先得拿到table
            var oTableNode = document.getElementById("tableid");
            //判断表格是否纯在
            if(oTableNode==null){
                alert("表格不存在！");
                return;
            }
            var rowNum = parseInt(document.getElementsByName("rowNum2")[0].value);
            if(isNaN(rowNum)){
                alert("输入的行数据非法，请重新输入！");
                return;
            }
            //deleteRow 从表格及 rows 集合中删除指定行(tr)。
            if(rowNum>=1&&rowNum<=oTableNode.rows.length){
                oTableNode.deleteRow(rowNum-1);
            }else{
                alert("删除的行不存在！");
                return;
            }

        }
        //删除第几列
        function delCol(){
            var oTableNode = document.getElementById("tableid");
            //判断表格是否纯在
            if(oTableNode==null){
                alert("表格不存在！");
                return;
            }
            var colNum = parseInt(document.getElementsByName("colNum2")[0].value);
            if(isNaN(colNum)){
                alert("输入的列数据非法，请重新输入！");
                return;
            }
            //deleteCell  从表格行及 cells 集合中删除指定单元格(td)。
            // 每一行找到 第 colNum个 表格把他删除
            if(colNum>=1 && colNum<=oTableNode.rows[0].cells.length){
                for(var i=0;i<oTableNode.rows.length;i++){
                    oTableNode.rows[i].deleteCell(colNum-1);
                }
            }else{
                alert("删除的列不存在!");
                return;
            }

        }


    </script>

  </head>

  <body>
        <input type="button" value="创建一个单元格" onclick="createTable1()"/>
        <input type="button" value="创建5行6列表格" onclick="createTable2(5,6)"/> <br/>
        行数：<input type="text" name="rowNum"/>&nbsp;&nbsp; 列数：<input type="text" name="colNum"/>
        <input type="button" value="添加列表" onclick="createTable3()"/><br/>
        删除的行:<input type="text" name="rowNum2"/>
        <input type="button" value="删除行" onclick="delRow()"><br/>
        删除的列:<input type="text" name="colNum2"/>
        <input type="button" value="删除列" onclick="delCol()"><br/>
        <hr/>
        <div id="div1"></div>
        <hr>
        <div id="div2"></div>
  </body>
</html>

老师版本

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>DHTML技术综合演示---示例:表格删除行、列</title>
        <style type="text/css">
            table{
                border:#8080ff solid 1px;
                width:500px;
                border-collapse:collapse;               
            }
            table td{
                border:#ff0000 solid 1px;
                padding:5px;
            }

        </style>

        <script type="text/javascript">
            //※使用表格相关的专用方法来实现
            function createTable(){
                var oTableNode = document.createElement("table");
                var oTrNode = oTableNode.insertRow();
                var oTdNode = oTrNode.insertCell();
                oTdNode.innerHTML="单元格文本内容";

                //把oTableNode对象添加到div中
                document.getElementById("div1").appendChild(oTableNode);
            }   

            //创建5行6列的表格
            function createTable2(){
                var oTableNode = document.createElement("table");
                for(var i=1; i<=5; i++){
                    var oTrNode = oTableNode.insertRow();
                    for(var j=1;j<=6;j++){
                        var oTdNode = oTrNode.insertCell();
                        oTdNode.innerHTML="单元格"+i+"-"+j;
                    }
                }
                //把oTableNode对象添加到div中
                document.getElementById("div2").appendChild(oTableNode);
            }


            function createTable3(){
                var oTableNode = document.createElement("table");

                try{
                  var rowNum=parseInt( document.getElementsByName("rowNum")[0].value );
                  var colNum=parseInt( document.getElementsByName("colNum")[0].value );
                  if(isNaN(rowNum)){
                     alert("行数格式错误!");
                     return;
                  }
                  if(isNaN(colNum)){
                     alert("列数格式错误!");
                     return;
                  }
                }catch(e){
                    alert("不异常...");
                    return;
                }

                for(var i=1; i<=rowNum; i++){
                    var oTrNode = oTableNode.insertRow();
                    for(var j=1;j<=colNum;j++){
                        var oTdNode = oTrNode.insertCell();
                        oTdNode.innerHTML="单元格"+i+"-"+j;
                    }
                }

                //为下面的删除表格功能实现，给当前表格添加一个id属性
                //oTableNode.id="tableid";//法1
                oTableNode.setAttribute("id", "tableid");//法2

                document.getElementById("div3").appendChild(oTableNode);
            }


        </script>
    </head>

    <body>
        <input type="button" value="创建表格" onclick="createTable()">  &nbsp;&nbsp;&nbsp;
        <input type="button" value="创建表格2" onclick="createTable2()">
        <br/>

        行数:<input type="text" name="rowNum"/>  &nbsp;&nbsp; 列数:<input type="text" name="colNum"/>
        <input type="button" value="创建表格3" onclick="createTable3()">  &nbsp;&nbsp;&nbsp;
        <hr/>
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>

        <hr/>
        行号:<input type="text" name="rowNum2"/>  
        <input type="button" value="删除表格行" onclick="delRow()"> <br/>
         列号:<input type="text" name="colNum2"/> &nbsp;&nbsp;
        <input type="button" value="删除表格列" onclick="delCol()"> <br/>
        <script type="text/javascript">
           function delRow(){
               var oTableNode = document.getElementById("tableid");
               //alert(oTableNode.rows.length);

               if(oTableNode==null){
                   alert("表格不存在!");
                   return;
               }

               var rowNum2 = parseInt(document.getElementsByName("rowNum2")[0].value);
               if(isNaN(rowNum2)){
                     alert("行号格式错误!");
                     return;
               }
               if(rowNum2>=1 && rowNum2<= oTableNode.rows.length){
                   oTableNode.deleteRow(rowNum2-1);
               }else{
                   alert("要删除的行不存在!");
               }

           }

           function delCol(){
               var oTableNode = document.getElementById("tableid");
               if(oTableNode==null){
                   alert("表格不存在!");
                   return;
               }

               var colNum2 = parseInt(document.getElementsByName("colNum2")[0].value);
               if(isNaN(colNum2)){
                     alert("列号格式错误!");
                     return;
               }
               if(colNum2>=1 && colNum2<= oTableNode.rows[0].cells.length){
                  for(var i=0;i<oTableNode.rows.length;i++){
                      oTableNode.rows[i].deleteCell(colNum2-1);
                  }
               }else{
                   alert("要删除的列不存在!");
               }
           }

        </script>
    </body>
</html>