动态创建表格、删除单行、单列

最新推荐文章于 2025-05-27 09:23:26 发布

hongtengfei523

最新推荐文章于 2025-05-27 09:23:26 发布

阅读量422

点赞数

分类专栏： javascript 文章标签： javascript DOM web 动态表格

本文链接：https://blog.youkuaiyun.com/hongtengfei523/article/details/48861795

版权

javascript 专栏收录该内容

4 篇文章

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <title>Untitled Document</title>
       <link rel="stylesheet" href="demo.css" type="text/css">
       <script type="text/javascript">
           function createTab(){
               var tabNode = document.createElement("table");
               tabNode.setAttribute("id","tabid");
               var row = document.getElementsByName("rowname")[0].value;
               var cell = document.getElementsByName("cellname")[0].value;
               var div = document.getElementsByTagName("div")[0];
               //alert(div.nodeName);
               for(var x=1;x<=row;x++){
                   var trNode = tabNode.insertRow();
                   for(var y=1;y<=cell;y++){
                       var tdNode = trNode.insertCell()
                        tdNode.innerHTML="行"+x+",列"+y;
                   }
               }
               div.appendChild(tabNode);
               //alert(div.nodeName);

           }
       function createTab1(){
           var tabNode = document.createElement("table");
           alert(row+"....."+cell);
           var trNode = tabNode.insertRow();
           var tdNode = trNode.insertCell();
           tdNode.innerHTML ="单元格一"
           document.getElementsByTagName("div")[0].appendChild(tabNode);

       }
       function deleteRow(){
           var tabNode = document.getElementById("tabid");
           var rownum = document.getElementsByName("deleterow")[0].value;
           if(tabNode == null){
               alert("表格不存在");
               return;
           }
           if(rownum>0 && rownum<=tabNode.rows.length){
               tabNode.deleteRow(rownum-1);
           }
           else{
               alert("删除的行不存在，学习数数很重要。");
           }

           //alert(rownum);
       }
       function deleteCell(){
           var tabNode = document.getElementById("tabid");
           var cellnum = document.getElementsByName("deletecell")[0].value;
            if(tabNode == null){
                 alert("表格不存在");
                 return;
           }
           if(cellnum>0 && cellnum<=tabNode.rows[0].cells.length)
           {
               for(var x=0;x<tabNode.rows.length;x++)
               {
                   tabNode.rows[x].deleteCell(cellnum-1);
               }
           }
           else{
               alert("删除的列不存在，学习数数很重要。");
           }
   }

       </script>
   </head>
   <body>
       行数：<input type="text" name = "rowname"/><br/>
       列数：<input type="text" name = "cellname"/><br/>
       <input type="button" value="创建表格" οnclick="createTab()"/><br/>
       <input type="text" name="deleterow"/><input type="button" value="删除行" οnclick="deleteRow()"><br/>
       <input type="text" name="deletecell"/><input type="button" value="删除列" οnclick="deleteCell()"><br/>
       <div>

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