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

<html>

<head>

<script type="text/javascript">

    var i = ;

    function deleteTable(myNode) {

        i --;

        document.getElementById('table1').removeChild(myNode.parentNode.parentNode.parentNode.parentNode);

    }

    function createImageTable() {

        i++;

        if(i > ) {

            i --;

            alert("每次只允许添加1道问题");

        } else {

            var t = document.createElement('table');

            //动态添加第一行

            var tr1 = t.insertRow(-);

            var td11 = tr1.insertCell(-);

            td11.align="right";

            td11.width="";

            var td12 = tr1.insertCell(-);

            //设置内容和属性

            td11.innerHTML = "题目 :";

            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)'/>";

            //动态添加第二行

            var tr1 = t.insertRow(-);

            var td11 = tr1.insertCell(-);

            td11.align="right";

            td11.width="";

            var td12 = tr1.insertCell(-);

            //设置内容和属性

            td11.innerHTML = "添加图片文件 :";

            td12.innerHTML = "<input type='file' name='myFile' id='imageFile' />";

            //添加第三行

            var tr2 = t.insertRow(-);

            var td11 = tr2.insertCell(-);

            td11.align="right";

            var td12 = tr2.insertCell(-);

            //设置内容和属性

            td11.innerHTML = "试题类型 :";

            td12.innerHTML = "<input type='radio' name='textQuesType' value='single' checked='checked'/>单选题      <input type=radio name='textQuesType' value='multiple'/>多选题";

            //添加第四行

            var tr3 = t.insertRow(-);

            var td31 = tr3.insertCell(-);

            td31.align="right";

            var td32 = tr3.insertCell(-);

            //设置内容和属性

            td31.innerHTML = "选项1 :";

            td32.innerHTML = "<input type='text' name='textOption[0].optionName' id='textOption[0].optionName' />是否是正确答案：<input type='checkbox' name='answer' value='0'/>";

            //添加第五行

            var tr3 = t.insertRow(-);

            var td31 = tr3.insertCell(-);

            td31.align="right";

            var td32 = tr3.insertCell(-);

            //设置内容和属性

            td31.innerHTML = "选项2 :";

            td32.innerHTML = "<input type='text' name='textOption[1].optionName' id='textOption[1].optionName' />是否是正确答案：<input type='checkbox' name='answer' value='1' />";

            //添加第六行

            var tr3 = t.insertRow(-);

            var td31 = tr3.insertCell(-);

            td31.align="right";

            var td32 = tr3.insertCell(-);

            //设置内容和属性

            td31.innerHTML = "选项3 :";

            td32.innerHTML = "<input type='text' name='textOption[2].optionName' id='textOption[2].optionName' />是否是正确答案：<input type='checkbox' name='answer' value='2' />";

            //添加第七行

            var tr3 = t.insertRow(-);

            var td31 = tr3.insertCell(-);

            td31.align="right";

            var td32 = tr3.insertCell(-);

            //设置内容和属性

            td31.innerHTML = "选项4 :";

            td32.innerHTML = "<input type='text' name='textOption[3].optionName' id='textOption[3].optionName' />是否是正确答案：<input type='checkbox' name='answer' value='3' />";

            //添加第八行

            var tr3 = t.insertRow(-);

            var td31 = tr3.insertCell(-);

            td31.align="right";

            var td32 = tr3.insertCell(-);

            //设置内容和属性

            td31.innerHTML = "选项5 :";

            td32.innerHTML = "<input type='text' name='textOption[4].optionName' id='textOption[4].optionName' />是否是正确答案：<input type='checkbox' name='answer' value='4' />";

            t.setAttribute("frame", "below");

            t.setAttribute("width", "");

            //t.setAttribute("border", "1");

            t.setAttribute("bordercolor", "#818181");

            document.getElementById('table1').appendChild(t);

        }

    }

</script>

</head>

<body>

                <font color="#B3171C" size="">添加测评问题</font><p/>

                <table width="" border="" id="quesTable">

                    <tbody>

                        <tr>

                            <td colspan="" align="center">选择添加试题类型：

                            <input type="button" name="addtext" value="图片类型" onclick="createImageTable()" />

                            </td>

                        </tr>

                    </tbody>

                </table>

        </form>

    </div>

</body>

</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. js动态创建表格方法

    window.onload = function(){ var table = document.createElement('table'); table.border = 1; table.wid ...

  2. centos 5.8 x64Jetty的安装以及项目部署配置

    链接地址:http://blog.csdn.net/shuixin536/article/details/9049821 安装环境 centos 5.8 x64 安装前须知 首先在安装Jetty之前要 ...

  3. [iOS]超详细Apache服务器的配置(10.10系统)

    配置目的:有一个自己专属的测试服务器 我们需要做以下事情: 1.新建一个目录,存放网页 2.修改Apache配置文件httpd.conf - 修改两个路径 - 增加一个属性 - 支持PHP脚本 3.拷 ...

  4. Servlet学习的两个案例之网站访问次数的统计

    一.统计次数的Servlet源码 package com.shanrengo; import java.io.IOException; import javax.servlet.ServletCont ...

  5. PHP 8大安全函数

    1. mysql_real_escape_string() 这个函数对于在PHP中防止SQL注入攻击很有帮助,它对特殊的字符,像单引号和双引号,加上了“反斜杠”,确保用户的输入在用它去查询以前已经是安 ...

  6. poj 3335 /poj 3130/ poj 1474 半平面交 判断核是否存在 / poj1279 半平面交 求核的面积

    /*************** poj 3335 点序顺时针 ***************/ #include <iostream> #include <cmath> #i ...

  7. 深入浅出—JAVA(3)

    3.认识变量 变量有两种:primitive主数据类型和引用. 变量有两种口味:清凉的primitive主数据类型与香辣的对象引用.primitive主数据类型用来保存基本类型的值,包括整数.布尔和浮 ...

  8. jQuery + svg/vml

    流程设计器jQuery + svg/vml(Demo7 - 设计器与引擎及表单一起应用例子)   去年就完成了流程设计器及流程引擎的开发,本想着把流程设计器好好整理一下,形成一个一步一步的开发案例,结 ...

  9. 一維條碼編碼規則(1D Barcode)

    1.Code 39 條碼:又分 標準型Code 39 條碼(Standard Code 39):資料內容包含有0~9數字,A~Z英文字母,”+”,”-“,”*”,”/”,”%”,”$”,”.”以及sp ...

  10. HttpGet()和HttpPost()2

    Get一般用于从服务器取数据,而且不改变原来的内容: Post一般用于向服务器传递数据,这需要改变服务器的内容. 从安全性上考虑,Get的安全性要稍微差点,因为它会把信息直接在地址栏显示出来.(但是A ...