如何创建表格，创建行和列

Posted 2021-01-18 lxystar

如何创建表格，创建行和列

 行: <input type="text" id="row" />
     列: <input type="text" id="col" />
     <button id="btn">创建</button>
     <div id="wrap">
         <!-- <table>
            <tr>
                <td></td>
            </tr>
         </table> -->
     </div>
     <script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }
         $("btn").onclick=function(){
             $("wrap").innerhtml="";
             var rows=$("row").value;
             var cols=$("col").value;
             var oTable=document.createElement("table");
             oTable.border=2;
             oTable.style.width="300px";
             oTable.style.height="300px";
             for(var i=0;i<rows;i++){
                var oTr=document.createElement("tr");
                for(var j=0;j<cols;j++){
                var oTd=document.createElement("td");
                    oTr.appendChild(oTd);   
                }
                console.log(rows.value)
                var endTd=document.createElement("td");
                endTd.innerHTML="<a href=‘javascript:;‘>删除</a>";
                oTr.appendChild(endTd);
                oTable.appendChild(oTr);    
             }
             $("wrap").appendChild(oTable);
             var as=document.querySelectorAll("a");
             for(var i=0;i<as.length;i++){
                 as[i].onclick=function(){
                    if(confirm("你确定删除吗")){
                        this.parentNode.parentNode.remove();
                        if(oTable.children.length==0){
                            oTable.remove();
                        }
                    }
                 }
             }
         }
        
     </script>

当点击按钮的时候，获取输入框中填入的行和列的值，创建表格，并给表格添加样式
循环行和列数，创建行，然后创建列，并把列添加到行里面
再把行添加到表格里，这样才能形成一个完整的
表格。