zoukankan      html  css  js  c++  java
  • 创建表格及只创建一个元素的方法

    <input type="button" value="点击" id="bt"/>
    <div id="dv"></div>
    <script src="commer.js"></script>
    <script>
    var arr=[
    {name:"百度",href:"http://www.baidu.com"},
    {name:"谷歌",href:"http://www.baidu.com"},
    {name:"爱奇艺",href:"http://www.baidu.com"},
    {name:"优酷",href:"http://www.baidu.com"},
    {name:"腾讯",href:"http://www.baidu.com"}
    ];
    //点击按钮创建表格
    ver("bt").onclick=function () {
    //创建table加入到div中
    var tableObj=document.createElement("table");
    tableObj.border="1";
    tableObj.cellPadding="0";
    tableObj.cellSpacing="0";
    ver("dv").appendChild(tableObj);
    //创建行,把行加入到table中
    for(var i=0;i<arr.length;i++){
    var dt=arr[i];//每个对象
    var trObj=document.createElement("tr");
    tableObj.appendChild(trObj);
    //创建第一个列,然后加入到行中
    var tb1=document.createElement("td");
    tb1.innerText=dt.name;
    tableObj.appendChild(tb1);
    //创建第二个列
    var tb2=document.createElement("td");
    tb2.innerHTML="<a href="+dt.href+">"+dt.name+"</a>";
    tableObj.appendChild(tb2);
    }
    };

    </script>





    <input type="button" value="点击" id="btn"/>
    <div id="dv"></div>
    <script src="commer.js"></script>
    <script>
    //有则删除,无则创建

    //先判断有没有,有就删除,没有就创建,创建多次,但还是显示一个
    // ver("btn").onclick=function () {
    // //判断这个div中有没有按钮,有就删除
    // //判断这个按钮的子元素是否存在
    // if(ver("btn2")){
    // ver("dv").removeChild(ver("btn2"));
    // }
    // var Obj=document.createElement("input");
    // Obj.type="button";
    // Obj.value="按钮";
    // Obj.id="btn2";
    // ver("dv").appendChild(Obj);
    // };

    //只创建一次
    ver("btn").onclick=function () {
    //判断这个div中有没有按钮,有就删除
    //判断这个按钮的子元素是否存在
    if(!ver("btn2")){
    var Obj=document.createElement("input");
    Obj.type="button";
    Obj.value="按钮";
    Obj.id="btn2";
    ver("dv").appendChild(Obj);
    }
    };


    </script>
  • 相关阅读:
    最优装载问题---贪心算法
    windows 10 资源管理器多余盘符去除
    js版本排序改造vue版本
    async and await
    echarts问题
    vue兼容到IE9
    expdp/impdp 参数说明,中英对照
    MySQL ibdata1文件迁移
    Oracle AWR报告提取方法
    Vertica DBD 分析优化设计
  • 原文地址:https://www.cnblogs.com/lujieting/p/10050433.html
Copyright © 2011-2022 走看看