`

IE中<table>标签不支持appendChild()方法

    博客分类：
  • JS
IE 
阅读更多
<html>
  <head>
    <title>JS测试</title>
    <script type="text/javascript">
      var num = 2;
      function addRow(){
        var tr = document.createElement("tr");
        var td = document.createElement("td");
        var te = document.createTextNode('row '+num++);
        td.appendChild(te);
        tr.appendChild(td);
        var table = document.getElementById("table");
        if(tbody.rows.length == 6){
          alert('不能加了!');
        }else{
          table.appendChild(tr);
        }
      }
    </script>
  </head>
  <body">
    <table id="table">
      <tr id="n">
        <th>行数</th>
      </tr>
      <tr>
        <td>row 1</td>
      </tr>
    </table>
    <input type="button" value="Button" onclick="addRow();">
  </body>
</html>

上面JS代码不能向<table>中添加行,因为IE中<table>标签不支持appendChild()方法.
解决办法:在<table>标签中加入<tbody>标签,使用tbody元素加入新行.
<html>
  <head>
    <title>JS测试</title>
    <script type="text/javascript">
      var num = 2;
      function addRow(){
        var tr = document.createElement("tr");
        var td = document.createElement("td");
        var te = document.createTextNode('row '+num++);
        td.appendChild(te);
        tr.appendChild(td);
        var tbody= document.getElementById("tbody");
        if(tbody.rows.length == 6){
          alert('不能加了!');
        }else{
          tbody.appendChild(tr);
        }
      }
    </script>
  </head>
  <body">
    <table>
      <tbody id="tbody">
        <tr id="n">
          <th>行数</th>
        </tr>
        <tr>
          <td>row 1</td>
        </tr>
      </tbody>
    </table>
    <input type="button" value="Button" onclick="addRow();">
  </body>
</html>

分享到：
| JS不支持重载
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    新浪推荐浮动广告

    charset=gb2312" /&gt;&lt;br&gt;&lt;title&gt;test&lt;/title&gt;&lt;br&gt;&lt;/head&gt;&lt;br&gt;&lt;body leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0"&gt;&lt;br&gt;&lt;table height=1000&gt;&lt;br&gt;&lt;tr&gt;&lt;td&gt;dddd&lt;/td&gt;&lt;/tr&gt;&lt;br&gt;&lt;/table&gt;&lt;br&gt;&lt;/body&gt;&lt;br...

    JS动态创建html节点

    &lt;table&gt; &lt;tr id="tr1"&gt; &lt;td&gt; 1 &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;script&gt; var tt = document.getElementById("tr1"); for (var i = 0; i &lt; 10; i++) { var FF = document.createElement("&lt;td&gt;&lt;/td&gt;"); FF....

    JavaScript Table行定位效果

    定位方面，除了不支持fixed的ie6用absolute，其他都使用fixed定位。 【克隆tr】 table有一个rows集合，包括了table的所有tr（包括thead和tfoot里面的）。 程序的Clone方法会根据其参数克隆对应索引的tr： this._...

    JavaScript table 动态添加行，列

    &lt;title&gt;无标题文档&lt;/title&gt; &lt;script&gt; function show() { var num1=document.getElementById('num1').value; var num2=document.getElementById('num2').value; var myDiv=document.getElementById('showDiv'...

    移动全屏代码

    &lt;ul class="mui-table-view"&gt; &lt;li class="mui-table-view-cell mui-radio mui-left"&gt; &lt;input name="radio" type="radio" class="mui-radio"&gt;Item 5 &lt;/li&gt; &lt;li class="mui-...

    js原生appendChild的bug解决心得分享

    appendChild 主要是用来追加节点 插入到最后 代码如下: [removed] = function(){ var ul2 = document....i&lt;oli&gt;讲Id为ul1的内容插入到ul2里面&lt;/h3&gt; &lt;ul id=”ul1″&gt; &lt;li&gt;1&lt;/li&gt; &lt;li&gt;2&lt;/li&gt; &lt;li&gt;3&lt;/li&gt; &lt;li&gt;4&lt;/li&gt; &lt;l

    Select精美下拉框(漂亮)

    document.all.SS_TempDiv.appendChild(this.Table); document.all.SS_TempDiv.removeNode(); } function SS_write (srcHTML, ListMax, bAutoDetect) { var oSS = new SS_create(srcHTML, ListMax, bAutoDetect...

    xml_demo_VS2010_C++

    void Cxml_test4Dlg::OnBnClickedButton1() { // TODO: 在此添加控件通知处理程序代码 CComPtr&lt;IXMLDOMDocument&gt; ... spTheBook-&gt;appendChild(spTheElem, &spNewNode;); spTheElem.Release(); spNewNode.Release();

    JavaScript_DOM编程

    appendChild方法：将一个对象的Html标签添加到&lt;body&gt;标签对的最后 3.form对象 submit方法：该方法不会触发onsubmit事件 item方法：返回某字段元素值(不能返回type=image类型) onsubmit事件：在程序提交前触发...

    实现情人节动态爱心效果（附代码h5+css+js）

    &lt;title&gt;3daixin&lt;/title&gt; &lt;style type="text/css"&gt; body{ background:black; } .heart3d{ position:relative; width: 100px; height: 160px; margin:50px auto; animation: rot 20s linear infinite;/*...

    js使用小技巧

    &lt;a href="javascript:function()"&gt;word&lt;/a&gt; 上一网页源 asp: request.servervariables("HTTP_REFERER") javascript: document.referrer 释放内存 CollectGarbage(); 禁止右键 document.oncontextmenu = ...

    1234.htmlyangzihang

    &lt;title&gt;2019新年倒计时&lt;/title&gt; &lt;style&gt; @import url("https://fonts.googleapis.com/css?family=Aleo"); :root { font-family: "Aleo", sans-serif; } html, body { width: 100%; height:...

    使用js在页面中绘制表格核心代码

    1.先写一个&lt;table&gt;，中间放入&lt;tbody&gt;，但是&lt;tbogy&gt;什么也不加 如何使用js在页面中绘制表格 2.在js中写入方法，绘制表格 如何使用js在页面中绘制表格 其核心语句就是： var row=document.createElement_x(“tr”); ...

    eclipse-testng 离线包下载

    eclipse-testng 离线包&lt;?xml version="1.0" encoding="UTF-8"?&gt; &lt;xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:math="http://exslt.org/math" xmlns:testng=...

    星空粒子特效 particles.rar

    在vue工程上应用时，可能会出现容器标签找不到的问题，此时应该放弃在页头Header里直接通过&lt;script&gt;&lt;/script&gt;标签引入的方式，改用动态添加，在vue的生命周期函数里，当组件挂载完毕后，再执行如下方法： ...

    前端知识代码

    html添加节点：&lt;!DOCTYPE html&gt; &lt;... &lt;head&gt; &lt;meta charset="UTF-8"&gt;.../title&gt; ... param.appendChild(mystr);... &lt;p&gt;第一个段落&lt;/p&gt; &lt;p&gt;第二个段落&lt;/p&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;

    通过JavaScript下载文件到本地的方法（单文件）

    针对单文件的情况下，同源的文件，可以通过 &lt; a&gt; 标签的 download 属性下载文件 const elt = document.createElement('a'); elt.setAttribute('href', url); elt.setAttribute('download', 'file.png'); elt....

    nanomorph ：:-实际DOM节点的超快速扩散算法

    &lt;div&gt;hello people&lt;/div&gt;&lt;/body&gt;morph ( tree , html ` &lt; div&gt; nanananana-na-no &lt;/ div&gt; ` )// document.body === &lt;body&gt;&lt;div&gt;nanananana-na-no&lt;/div&gt;&lt;/body&gt;morph ( tree , html ` &lt; div&gt; teeny...

    domify:html->元素

    domify ... 用法 可以在浏览器中直接使用： var domify = require ( 'domify' ) ; document .... var el = domify ( '&lt;p&gt;Hello &lt;em&gt;there&lt;/em&gt;&lt;/p&gt;' )...domify ( '&lt;p&gt;Hello &lt;em&gt;there&lt;/em&gt;&lt;/p&gt;' , jsdom . defaultView . do

    javascript inneHTML的地雷

    回顾一下，IE会把标签内前面的一些空白kill掉，还会把它里面标签统统大写，会显示动态添加的属性，在某些元素中，它还是只读的。这个由IE发明的东西，最后被爆如此多缺陷，真是令人心寒。不过innerHTML还有一地雷，...

Magicbox
Global site tag (gtag.js) - Google Analytics