zoukankan      html  css  js  c++  java
  • js动态增加html页面元素

    问题:

     
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
        <script type="text/javascript">
            function AddOrDelModel(modelId){
                   if(document.getElementById(modelId).checked){
                         var insertText = "<table><tr><td>"+modelId+"被选中</td></tr></table>"; 
    
                 document.getElementById("insert").innerHTML = document.getElementById("insert").innerHTML+insertText;   
    
               }else
    
                    {
                         document.getElementById("insert").innerHTML = document.getElementById("insert").innerHTML.replace("<table><tbody><tr><td>"+modelId+"被选中</td></tr></tbody></table>","");   
                 }    
              }
      </script>
    </head>
    <body>
            <input id="Checkbox1" type="checkbox" onclick="AddOrDelModel('Checkbox1')" value="checkbox1" name="CheckBox1" />
            <input id="Checkbox2" type="checkbox" onclick="AddOrDelModel('Checkbox2')" value="checkbox2" name="CheckBox2" />
    
        <div id="insert"></div>
    </body>

    要实现的功能选中checkbox1、checkbox2界面分别显示添加checkbox1、checkbox2被选中,取消选择则分别移除添加的内容.
    使用firefox调试显示在添加table的时候会自动多添加<tbody>标签
    现在在firefox和chrome运行没有问题,但是其他的浏览器(ie、搜狗等浏览器)就不行了。

    回答:

    function AddOrDelModel(modelId){
            var insertText = '<table tag=' + modelId + '><tr><td>' + modelId + '被选中</td></tr></table>', insertEl = document.getElementById("insert");
            if(document.getElementById(modelId).checked){
                    insertEl.innerHTML = insertEl.innerHTML + insertText;
                    }else{
                            var tables = insertEl.getElementsByTagName("table");
    
                for(var i = 0; i < tables.length; i++){
                    if(tables[i].tag = modelId){
                        insertEl.removeChild(tables[i]);
                            break;
                        }
                    }
                }
        }
  • 相关阅读:
    A.4.2虚函数 virtual 和多态的实现
    A.51,集合类 ArrayList。2,对字符串的处理(String)
    A.4.1类的继承(implement)
    Android ExpandableListView的使用
    Android 使用SAX解析XML
    [转]Android 内存监测工具 DDMS > Heap .
    Android中 ExpandableList的使用2
    Android 横屏竖屏的切换
    Android 文件操作
    Android Preference的使用总结(很全很详细)以及SharedPreferences多个程序之间共享数据
  • 原文地址:https://www.cnblogs.com/liusijia/p/5241445.html
Copyright © 2011-2022 走看看