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>
  • 相关阅读:
    阿里Canal中间件的初步搭建和使用
    十大经典排序算法动画与解析,看我就够了!(配代码完全版)
    单点登录系统简介
    业务系统日志追踪
    kafka单机环境搭建及其基本使用
    Kafka 错误信息 java.io.IOException: Can't resolve address: VM_0_15_centos:9092
    CAS(乐观锁)以及ABA问题
    kafka_2.11-0.10.1.1集群搭建安装配置
    contos7 mongodb安装教程
    mongodb基础操作
  • 原文地址:https://www.cnblogs.com/lujieting/p/10050433.html
Copyright © 2011-2022 走看看