表格的即时编译和删除操作

作者: 深漂浪子 | 来源:发表于2019-06-03 15:53 被阅读0次

表格的即时编译和删除操作
DOM元素操作
JS实现删除表格所有行
表格操作(删除，移动)
JVM学习笔记
如何批量清除 Word表格里的内容
vue：element-ui问题小记（二）
JIT（just-in-time）即时编译
深入浅出 JIT 编译器
iview table表格中render函数操作返回标签

<!DOCTYPE html><html lang="en">
<head>
  <meta charset="UTF-8">    
  <title>Document</title>
  <style>     
        table>tr>td{width:20px;height:20px;}
  </style>
 </head>
 <body>    
   <input type="text" placeholder="请输入行数"><input type="text" placeholder="请输入列数"><button id="btn">随机生成表格</button>
 </body>
</html>
<script src='https://gitee.com/zhongxiaoyou1314520/codes/pxsoar90ywu4ckb25dfqi68/raw?blob_name=js%E5%8E%9F%E7%94%9F%E5%B0%81%E8%A3%85%E5%87%BD%E6%95%B0%E5%BA%93'></script>
<script>
  var btn=document.getElementById("btn");
  var input=document.querySelectorAll("input");

  btn.onclick=function(){
     var input1=input[0].value;
    var input2=input[1].value;  
    var table=document.createElement("table");
    document.body.appendChild(table);
    for(var i=0;i<input1;i++){
        var tr= document.createElement("tr");
        table.appendChild(tr);
        for(var j=0;j<input2;j++){
            var td= document.createElement("td");
            td.innerHTML=numRandom(1,2);//随机生成1-100的数字
            td.style.background=randomColor();//随机生成颜色
            tr.appendChild(td);
        }
        //在每列后面再添加删除按钮
        var button= document.createElement("button");
        button.innerHTML="删除";
        tr.appendChild(button);
        button.onclick=function(){
            this.parentNode.remove();
        }
    }
  }
</script>