我们在实际开发中经常会想要实现如下情况： 
点击某个按钮，然后动态的网页面里面添加一个表格或者一行，这个更加灵活方便。但是实现起来肯定不能像在页面里面直接写标签来的容易，以下是我项目中的代码，拿过来分享：

  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4.     var i = ;
  5.     function deleteTable(myNode) {
  6.         i --;
  7.         document.getElementById('table1').removeChild(myNode.parentNode.parentNode.parentNode.parentNode);
  8.     }
  9.  
  10.     function createImageTable() {
  11.         i++;
  12.         if(i > ) {
  13.             i --;
  14.             alert("每次只允许添加1道问题");
  15.         } else {
  16.             var t = document.createElement('table');
  17.             //动态添加第一行
  18.             var tr1 = t.insertRow(-);
  19.             var td11 = tr1.insertCell(-);
  20.             td11.align="right";
  21.             td11.width="";
  22.             var td12 = tr1.insertCell(-);
  23.             //设置内容和属性
  24.             td11.innerHTML = "题目 :";
  25.             td12.innerHTML = "<input type='text' name='textTitle' id='textTitle' /><input type='hidden' name='quesLeixing' value='image' id='quesLeixing'/>         <input type=button value='删除该题' onclick='deleteTable(this)'/>";
  26.             //动态添加第二行
  27.             var tr1 = t.insertRow(-);
  28.             var td11 = tr1.insertCell(-);
  29.             td11.align="right";
  30.             td11.width="";
  31.             var td12 = tr1.insertCell(-);
  32.             //设置内容和属性
  33.             td11.innerHTML = "添加图片文件 :";
  34.             td12.innerHTML = "<input type='file' name='myFile' id='imageFile' />";
  35.             //添加第三行
  36.             var tr2 = t.insertRow(-);
  37.             var td11 = tr2.insertCell(-);
  38.             td11.align="right";
  39.             var td12 = tr2.insertCell(-);
  40.             //设置内容和属性
  41.             td11.innerHTML = "试题类型 :";
  42.             td12.innerHTML = "<input type='radio' name='textQuesType' value='single' checked='checked'/>单选题      <input type=radio name='textQuesType' value='multiple'/>多选题";
  43.             //添加第四行
  44.             var tr3 = t.insertRow(-);
  45.             var td31 = tr3.insertCell(-);
  46.             td31.align="right";
  47.             var td32 = tr3.insertCell(-);
  48.             //设置内容和属性
  49.             td31.innerHTML = "选项1 :";
  50.             td32.innerHTML = "<input type='text' name='textOption[0].optionName' id='textOption[0].optionName' />是否是正确答案：<input type='checkbox' name='answer' value='0'/>";
  51.             //添加第五行
  52.             var tr3 = t.insertRow(-);
  53.             var td31 = tr3.insertCell(-);
  54.             td31.align="right";
  55.             var td32 = tr3.insertCell(-);
  56.             //设置内容和属性
  57.             td31.innerHTML = "选项2 :";
  58.             td32.innerHTML = "<input type='text' name='textOption[1].optionName' id='textOption[1].optionName' />是否是正确答案：<input type='checkbox' name='answer' value='1' />";
  59.             //添加第六行
  60.             var tr3 = t.insertRow(-);
  61.             var td31 = tr3.insertCell(-);
  62.             td31.align="right";
  63.             var td32 = tr3.insertCell(-);
  64.             //设置内容和属性
  65.             td31.innerHTML = "选项3 :";
  66.             td32.innerHTML = "<input type='text' name='textOption[2].optionName' id='textOption[2].optionName' />是否是正确答案：<input type='checkbox' name='answer' value='2' />";
  67.             //添加第七行
  68.             var tr3 = t.insertRow(-);
  69.             var td31 = tr3.insertCell(-);
  70.             td31.align="right";
  71.             var td32 = tr3.insertCell(-);
  72.             //设置内容和属性
  73.             td31.innerHTML = "选项4 :";
  74.             td32.innerHTML = "<input type='text' name='textOption[3].optionName' id='textOption[3].optionName' />是否是正确答案：<input type='checkbox' name='answer' value='3' />";
  75.             //添加第八行
  76.             var tr3 = t.insertRow(-);
  77.             var td31 = tr3.insertCell(-);
  78.             td31.align="right";
  79.             var td32 = tr3.insertCell(-);
  80.             //设置内容和属性
  81.             td31.innerHTML = "选项5 :";
  82.             td32.innerHTML = "<input type='text' name='textOption[4].optionName' id='textOption[4].optionName' />是否是正确答案：<input type='checkbox' name='answer' value='4' />";
  83.             t.setAttribute("frame", "below");
  84.             t.setAttribute("width", "");
  85.             //t.setAttribute("border", "1");
  86.             t.setAttribute("bordercolor", "#818181");
  87.             document.getElementById('table1').appendChild(t);
  88.         }
  89.     }
  90. </script>
  91.  
  92. </head>
  93. <body>
  94.                 <font color="#B3171C" size="">添加测评问题</font><p/>
  95.                 <table width="" border="" id="quesTable">
  96.                     <tbody>
  97.                         <tr>
  98.                             <td colspan="" align="center">选择添加试题类型：
  99.                             <input type="button" name="addtext" value="图片类型" onclick="createImageTable()" />
  100.                             </td>
  101.                         </tr>
  102.                     </tbody>
  103.                 </table>
  104.  
  105.         </form>
  106.     </div>
  107. </body>
  108. </html>

js动态向页面中添加表格的更多相关文章

  1. FineUI中在一个页面中通过控件事件(JS)向父页面中添加Tab页

    1.在前台页面尾部添加js代码 </form>    <script type="text/javascript">        var basePath ...

  2. 利用javascript动态向网页中添加表格

    效果图如下: 以下是代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  3. 通过js实现在页面中添加音乐

    代码如下!兼容IE // JavaScript Document function autoPlay(){//自动播放 var myAuto = document.getElementById('my ...

  4. MVC学习随笔----如何在页面中添加JS和CSS文件

    http://blog.csdn.net/xxjoy_777/article/details/39050011 1.如何在页面中添加Js和CSS文件. 我们只需要在模板页中添加JS和CSS文件,然后子 ...

  5. JS动态修改页面EasyUI datebox不生效、EasyUI动态添加Class、EasyUI动态渲染解析解决方案

    这是个小菜在实际工作中遇到的问题,相信很多EasyUI新手很可能也遇到这样的问题,因此小菜觉得有必要拿出来分享一下. 这个问题要从EasyUI的datebox组件说起,小菜用这个组件的时候,发现用$( ...

  6. 在页面中添加两个 ＜select＞ 标签，用来显示年份和月份；同时添加两个 ＜ul＞ 标签，一个用来显示星期，另一个用来显示日期 在 JavaScript 脚本中动态添加年份和月份，获取当前日期的年份

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 Date 对象,在页面上显示一个万年历.选择不同的年份和月份,在页面中显示当前月的日历 实现思路: 在页面中添加两个 <s ...

  7. C# 在Word中添加表格的方法

    表格是组织整理数据的一种重要手段,应在生活中的方方面面.在Word文档中将繁杂的文字表述内容表格化,能快速.直接地获取关键内容信息.那么,通过C#,我们也可以在Word文档中添加表格,这里将介绍两种不 ...

  8. Java 在PDF中添加表格

    本文将介绍通过Java编程在PDF文档中添加表格的方法.添加表格时,可设置表格边框.单元格对齐方式.单元格背景色.单元格合并.插入图片.设置行高.列宽.字体.字号等. 使用工具:Free Spire. ...

  9. jQuery 中使用 DOM 操作节点，对页面中的表格实现增、删、查、改操作

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用 DOM 操作节点,对页面中的表格实现增.删.查.改操作 点击"增加"超链接时,将表格中的第一条数据添加到表格的末尾 ...

随机推荐

  1. SQL SERVER 2005 同步复制技术(转)

    SQL SERVER 2005 同步复制技术 以下实现复制步骤(以快照复制为例) 运行平台SQL SERVER 2005 一.准备工作: 1．建立一个 WINDOWS 用户,设置为管理员权限,并设置密 ...

  2. C++学习之虚继承

    http://blog.csdn.net/wangxingbao4227/article/details/6772579 C++中虚拟继承的概念 为了解决从不同途径继承来的同名的数据成员在内存中有不同 ...

  3. HTML5 按字母顺序排列的标签列表 new : HTML5 中的新标签。

    标签 描述 <!--...--> 定义注释. <!DOCTYPE>  定义文档类型. <a> 定义超链接. <abbr> 定义缩写. <acron ...

  4. NET Core，跨平台的轻量级RPC

    NET Core,跨平台的轻量级RPC:Rabbit.Rpc 特性一览 Apache License 2.0协议开源 支持客户端负载均衡(提供了轮询.随机算法的实现) 支持ZooKeeper和文件共享 ...

  5. 转:requirejs打包压缩r.js使用示例

    为了应对日益复杂,大规模的JavaScript开发.我们化整为零,化繁为简.将复杂的逻辑划分一个个小单元,各个击破.这时一个项目可能会有几十个甚至上百个JS文件,每个文件为一个模块单元.如果上线时都是 ...

  6. QLabel设置行间距（使用html的语法，比较巧妙）

    1.设置行间距 QLabel没有设置行间距的函数,所以这种办法是行不通的.只能采用其它类似的方法来实现,例如设置行高,使用样式代码如下: <p style='line-height:18px'& ...

  7. GridView用法的修改和删除

    (前台) <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="Fa ...

  8. Error creating bean with name 'enableRedisKeyspaceNotificationsInitializer'

    @Configuration public class HttpSessionConfig { @Bean public static ConfigureRedisAction configureRe ...

  9. 数据结构——队列（Queues）

    队列的存储特性:FIFO(first in first out)即先进先出原则 单向/双向队列 *优先队列(与queue不同) 存储方式: 带尾指针的单向链表 / 数组 queue类: queue() ...

  10. codility上的练习 （1）

    codility上面添加了教程.目前只有lesson 1,讲复杂度的……里面有几个题, 目前感觉题库的题简单. tasks: Frog-Jmp: 一只青蛙,要从X跳到Y或者大于等于Y的地方,每次跳的距 ...