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

<html>
<head>
<script type="text/javascript">
    ;
    function deleteTable(myNode) {
        i --;
        document.getElementById('table1').removeChild(myNode.parentNode.parentNode.parentNode.parentNode);
    }

    function createImageTable() {
        i++;
        ) {
            i --;
            alert("每次只允许添加1道问题");
        } else {
            var t = document.createElement('table');
            //动态添加第一行
            );
            );
            td11.align="right";
            td11.width=";
            );
            //设置内容和属性
            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)'/>";
            //动态添加第二行
            );
            );
            td11.align="right";
            td11.width=";
            );
            //设置内容和属性
            td11.innerHTML = "添加图片文件 :";
            td12.innerHTML = "<input type='file' name='myFile' id='imageFile' />";
            //添加第三行
            );
            );
            td11.align="right";
            );
            //设置内容和属性
            td11.innerHTML = "试题类型 :";
            td12.innerHTML = "<input type='radio' name='textQuesType' value='single' checked='checked'/>单选题      <input type=radio name='textQuesType' value='multiple'/>多选题";
            //添加第四行
            );
            );
            td31.align="right";
            );
            //设置内容和属性
            td31.innerHTML = "选项1 :";
            td32.innerHTML = "<input type='text' name='textOption[0].optionName' id='textOption[0].optionName' />是否是正确答案:<input type='checkbox' name='answer' value='0'/>";
            //添加第五行
            );
            );
            td31.align="right";
            );
            //设置内容和属性
            td31.innerHTML = "选项2 :";
            td32.innerHTML = "<input type='text' name='textOption[1].optionName' id='textOption[1].optionName' />是否是正确答案:<input type='checkbox' name='answer' value='1' />";
            //添加第六行
            );
            );
            td31.align="right";
            );
            //设置内容和属性
            td31.innerHTML = "选项3 :";
            td32.innerHTML = "<input type='text' name='textOption[2].optionName' id='textOption[2].optionName' />是否是正确答案:<input type='checkbox' name='answer' value='2' />";
            //添加第七行
            );
            );
            td31.align="right";
            );
            //设置内容和属性
            td31.innerHTML = "选项4 :";
            td32.innerHTML = "<input type='text' name='textOption[3].optionName' id='textOption[3].optionName' />是否是正确答案:<input type='checkbox' name='answer' value='3' />";
            //添加第八行
            );
            );
            td31.align="right";
            );
            //设置内容和属性
            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(");
            //t.setAttribute("border", "1");
            t.setAttribute("bordercolor", "#818181");
            document.getElementById('table1').appendChild(t);
        }
    }
</script>

</head>
<body>
                <font color=">添加测评问题</font><p/>
                <table width=" 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. C# 在Word中添加表格的方法

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

  7. spring:如何用代码动态向容器中添加或移除Bean ?

    先来看一张类图: 有一个业务接口IFoo,提供了二个实现类:FooA及FooB,默认情况下,FooA使用@Component由Spring自动装配,如果出于某种原因,在运行时需要将IFoo的实现,则F ...

  8. 使用HTML5的JS选择器操作页面中的元素

    文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...

  9. 如何使用Web3.js API 在页面中进行转账

    本文介绍如何使用Web3.js API 在页面中进行转账,是我翻译的文档Web3.js 0.2x 中文版 及 区块链全栈-以太坊DAPP开发实战 中Demo的文章说明. 写在前面 阅读本文前,你应该对 ...

随机推荐

  1. ENode 1.0 - 消息的重试机制的设计思路

    项目开源地址:https://github.com/tangxuehua/enode 上一篇文章,简单介绍了enode框架中消息队列的设计思路,本文介绍一下enode框架中关系消息的重试机制的设计思路 ...

  2. 使用ACE_Task管理线程

    为什么要使用ACE_Task来管理线程 从C#转到C++后,感觉到C++比C#最难的地方,就是在系统编程时,C#中有对应的类库,我接触到一个类后,就可以通过这个类,知道很多相关的功能.而在C++中,必 ...

  3. Linux/Centos下清理内存和Cache方法

    Linux/Centos下释放内存和缓存方法 $ free -m 运行sync将dirty的内容写回硬盘$ sync 通过修改proc系统的drop_caches清理free的cache$ echo ...

  4. PHP如何大幅度提升运行效率? -- 把它编译成机器码!

      书接上回   今天讨论如何大幅度提升PHP的运行效率. 在这,我们不纠结神马单双引号.全局变量.OO.require_once.错误抑制.... 在这,我们也不讨论APC.opcache.XCac ...

  5. 读jquery.cookie.js源码学到的几个技巧

    一.兼容AMD.CommonJS和普通JS的写法 (function (factory) { if (typeof define === 'function' && define.am ...

  6. django框架(View)

    -------------------URLconf-------------------1.设置 1.在settings.py文件中通过ROOT_URLCONF指定根级url的配置 2.urlpat ...

  7. C语言最后一次作业--总结报告

    1.当初你是如何做出选择计算机专业的决定的? 经过一个学期,你的看法改变了么,为什么? 你觉得计算机是你喜欢的领域吗,它是你擅长的领域吗? 为什么? 当时选择计算机专业,是基于自己的高考分数和想出省的 ...

  8. python基础——内置函数

    python基础--内置函数  一.内置函数(python3.x) 内置参数详解官方文档: https://docs.python.org/3/library/functions.html?highl ...

  9. Final阶段第1周/共1周 Scrum立会报告+燃尽图 01

    作业要求[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2411] 版本控制:https://git.coding.net/liuyy08 ...

  10. Java代码签名证书申请和使用指南

    第1步 下载签名工具 Step 1: Download Signing Tools 如果您还没有签名工具,请到SUN公司网站免费下载:http://java.sun.com/j2se/,推荐下载JDK ...