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

<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. 【转载】写一个js库需要怎样的知识储备和技术程度?

    作者:小爝链接:https://www.zhihu.com/question/30274750/answer/118846177来源:知乎著作权归作者所有,转载请联系作者获得授权. 1,如何编写健壮的 ...

  2. html ul 里 能放其他标签吗,比如h3、p?

    按标准的话,ul 里面应该只能放li,不过看见同事有的放了h3.p这些,这样到底可不可以?   <ul>里面只能放<li>.但是<li>里面可以放<h*> ...

  3. Advanced CSharp Messenger

    http://wiki.unity3d.com/index.php?title=Advanced_CSharp_Messenger Author: Ilya Suzdalnitski Contents ...

  4. unity访问php

    长连接,弱联网.不好意思,这俩不是一个意思. 反过来说,短连接,强联网,是不是有点别扭呢. 你可以不会php,甚至你可以不知道php是干什么的. 百度php安装环境,自行搭建好环境,顺便测试一下.(下 ...

  5. pod install后出现的错误

    [!] Your Podfile has had smart quotes sanitised. To avoid issues in the future, you should not use T ...

  6. yum update

    Linux升级命令有两个分别是yum upgrade和yum update, 这个两个命令是有区别的:代码如下:yum -y update升级所有包同时也升级软件和系统内核 代码如下:yum -y u ...

  7. C#异步Socket示例

    C#异步Socket示例 概要 在C#领域或者说.net通信领域中有着众多的解决方案,WCF,HttpRequest,WebAPI,Remoting,socket等技术.这些技术都有着自己擅长的领域, ...

  8. C#高级编程:泛型优点和特性

    泛型是CLR 2.0的一个新特性,在CLR 1.0中,要创建一个灵活的类或方法,但该类或方法在编译期间不知道使用什么类,就得以Object类为基础.而Object在编译期间没有类型安全性,因此必须进行 ...

  9. swift 开发学习问题

    1 UITableViewController 问题: [UITableView dequeueReusableCellWithIdentifier:forIndexPath:], unable to ...

  10. ConcurrentHashMap、synchronized与线程安全

    明明用了ConcurrentHashMap,可是始终线程不安全, 下面我们来看代码: public class Test40 { public static void main(String[] ar ...