zoukankan      html  css  js  c++  java
  • JavaScript动态创建元素(老帖新发)

    前言:
    工作中遇到一个项目需要在客户端动态创建表格,在表格里动态创建输入框,提供给用户输入,总结出两种方法,记录于下,以供翻阅……

    1.首先我需要创建一个Table用来盛放TR,

    var tab = document.createElement("TABLE");//创建一个Table对象
    tab.style.border="solid 1px gray";//Table边框属性设置
    tab.style.width="200px";//Table宽度为200px
    

    2.然后需要在Table里面创建TR用来盛放TD,这里有两种方法,一种是使用和上面创建Table相同的方法,但是需要先为Table创建TBODY,否则TR无法显示(心中的痛啊);另外一种是
    使用Table对象的自带方法创建,这种比较简单,也比较容易理解,废话不说,先写代码。
    type a:
    var tboy = document.createElement("TBODY");//创建tbody
    var tr = document.createElement("tr");//创建tr
    var tdText = document.createElement("td");//创建一个td,用来显示说明文字
    var tdInput = document.createElement("td");//创建一个td,用来盛放后面需要的文本框
    tdText.innerHTML="姓名:";//td内容
    tr.appendChild(tdText);//添加td到tr里面
    tr.appendChild(tdInput);//添加td到tr里面
    tboy.appendChild(tr);//添加tr到tbody里面
    tab.appendChild(tboy);//添加tbody到table里面
    //注意,使用此种方法,需要先把所有的子对象(例如td)里面需要放的先放上,否则,执行tr.appendChild(tdText);之后再对该td所做的操作都无效……
    type b:
    var row=tab.insertRow(0);//在位置0处插入一行
    var tdText=x.insertCell(0);//在位置0处插入一个td
    var tdInput=x.insertCell(1);//在位置1处插入一个td
    tdText.innerHTML="姓名:";
    

    明显第二种方法更简单明了,不过在下还是使用的第一种(俺不太喜欢使用索引……)……
    3.创建一个Input text 放到tdInput里面,基本上就算完成了……
    var box = document.createElement("input");
    box.setAttribute("type", "text");//关键代码,设置属性type 值为 text
    box.setAttribute("size", "18");//设置size属性
    box.setAttribute("id", "txtName");//设置Id属性
    tdInput.appendChild(box);//文本框添加到td元素中
    

    o la……
    代码有些散乱,唉,没有高手的能力啊……

    懒惰,是一个通病。 努力,必会成为一种习惯。
  • 相关阅读:
    etcd的原理分析
    (转)Linux sort命令
    随机森林
    python 类的定义和继承
    python random
    Spark源码阅读(1): Stage划分
    Mac 上安装MySQL
    Python 删除 数组
    在循环中将多列数组组合成大数组
    准确率 召回率
  • 原文地址:https://www.cnblogs.com/encoding/p/1839320.html
Copyright © 2011-2022 走看看