• js在table中添加tbody块,方便整块的添加和删除


    利用js在table中添加tbody块,方便整块的添加和删除,以下为添加。
    <table width="400" border="1" cellspacing="0" cellpadding="0" id="table1">
    </table>
    <script language="javascript">
    var value = "内容";
    var value1 = "<a href='*'>link</a>";
    var row = 5; //创建5行
    var col = 7; //创建7格
    var tbody = document.createElement("tbody"); //新建一个tbody类型的Element节点
    var tbody1=document.createAttribute("tbody1");
    for(var i=0;i<row;i++) { var tr = document.createElement("tr"); //新建一个tr类型的Element节点 for(var j=0;j<col;j++) { var td = document.createElement("td"); //新建一个td类型的Element节点 td.innerHTML = value1;// 链接。。。。 tr.appendChild(td); //将节点td加入tr中 } tbody.appendChild(tr); //将节点tr加入tbody中 } var parNode = document.getElementById("table1"); //定位到table上 parNode.appendChild(tbody); //将节点tbody加入节点尾部 </script>
    一次添加一个tr,可以使用以下
    <script> var i=0,arr=new Array('F9F9F9','F0F0F0'); function addNew(){
    var parNode = document.getElementById("table1"); //定位到table上 tr=parNode .insertRow();tr.style.backgroundColor=arr[i%2];

     tr.insertCell().innerText="图片"+(++i);
    tr.insertCell().innerHTML='<input type=file name=pic'+i+' class="border_index"> <a href=javascript:void(0) onclick=del()>删除</a>'
    }}
    整块删除只需要
    <script language="javascript">
    var parNode = document.getElementById("table1"); //定位到table上
    var tbody;
    if(-[1,]){ //非IE
    tbody=document.getElementsByTagName("tbody")[0];
    parNode.removeChild(tbody);
    }else{ //IE
    tbody=document.getElementsByTagName("tbody")[0];
    parNode.removeNode(tbody);
    }
    一次删除 一个tr行 可以用以下方法
    <script language="javascript">
    var parNode=document.getElementById("table1");
    parNode.deleteRow(2);//从表中删除第三行tr


    </script>
  • 相关阅读:
    使用v-if刷新生命周期
    vue element 上传图片 文件
    vue中既能获取事件对象又能获取参数的方法
    element-ui跨行
    云原生体系下 Serverless 弹性探索与实践
    PaddlePaddle:在 Serverless 架构上十几行代码实现 OCR 能力
    谷粒商城笔记-环境配置(2)——文件上传、java参数验证、递归,分页、事务
    java 前端技术选型(Vue.js+Element.ui)
    java实现woff字体解析,逆向反爬
    自定义dom重现函数useResume
  • 原文地址:https://www.cnblogs.com/Uncho/p/4274241.html
Copyright © 2020-2023  润新知