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

最新推荐文章于 2021-11-18 20:07:22 发布
最新推荐文章于 2021-11-18 20:07:22 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： 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" οnclick="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" οnclick="addRow();">
</body>
</html>
DaveeChen
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS中appendChild追加子节点无效的解决方法
10-17
主要给大家介绍了关于JS中appendChild追加子节点无效的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习
html控制列长,javaScript控制html页面加行或列的两种方法
weixin_35775969的博客
06-29 290
第一种：insertRow()语法tableObject.insertRow(index)说明该方法创建一个新的 TableRow 对象，表示一个新的 标记，并把它插入表中的指定位置。新行将被插入 index 所在行之前。若 index 等于表中的行数，则新行将被附加到表的末尾。如果表是空的，则新行将被插入到一个新的 段，该段自身会被插入表中。例子：function addRow(){//添加一行...
table的创建方法
weixin_30950237的博客
08-03 52
table的创建方法 <script type="text/javascript"> function tableDom(){ var table = document.createElement("table"); table.border = "1" document.body.appendChild(tabl...
javascript实现一个动态的表格，这个小的案例是没有数据库的，只是一些前端的知识，使用到了innerHTML
qq_43064077的博客
11-18 1577
1效果展示 就是在输入框里面输入数据点击按钮 将数据添加到下面的table里面，点击table里面的删除超链接来删除一条记录 和数据没有一点关系的 2用到的知识 增删原理： 这里的添加原理很简单就是使用javascript的DOM对象进行处理 添加一行就是使用appendChild()方法实现添加一条记录 删除对象的时候就是使用使用父类标签的removeChile方法来实现的 3添加的实现过程： /** * 实现的过过程 * 1.我们要通过输入框的id 先得到三个输入框里面的数据 方法 输入框对象的v
JavaScript部分案例
qq_39581763的博客
10-31 104
JavaScript 是 Web 的编程语言。 所有现代的 HTML 页面都使用 JavaScript。 JavaScript 非常容易学。 阅读本教程，您需要有以下基础： HTML 教程 CSS 教程 PS ：JavaScript 一直在升级，请等待 01、电灯的开关 <img id="light" src="img/off.gif"> &...
解决ie6 ie7中js不能通过appendChild("tr")添加table行的方法
wasw100
09-22 273
本机只有ie7,ff3.5,opera10，测试在这三个环境中测试通过。   在标准DOM中添加元素一般使用appendChild();但用js在table中添加行时却失效了。 网上搜了一下说 ie6，ie7不支持table.appendChild("tr") 那在JavaScript中怎么在一个table中添加一行呢？在http://www.w3schools.com/htmldom/d...
IE6,7table不支持innerHTML,appendChild问题解决
u012901416的专栏
12-06 119
[size=medium]发现垃圾IE下table不支持innerHTML,appendChild方法 只能用table特有的方法来处理 详细方法见[url]http://www.w3school.com.cn/htmldom/dom_obj_table.asp[/url] deleteRow() 从表格删除一行。 insertRow() 在表格中插入一个新行。[/size] [code...
html tbody id 赋值,IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案
weixin_32029321的博客
06-27 360
IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值，重现代码如下代码如下:IE6-IE9中tbody的innerHTML不能复制bugaaaGETSETvar tbody = document.getElementsByTagName('tbody')[0]function setTbody() {tbody.innerHTML = 'bbb'}function getTbod...
IE不出现Flash激活框的小发现的js实现方法
12-11
大家都知道欺骗IE不出现Flash激活框的方法很简单 只要在页面上面引入一个js文件，然后用js来控制flash的html代码输出即可。但是如果我们的脚本是动态加载的就会有两种情况，看以下代码 程序代码 var s = ...
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
10-29
在IE7下，生成的Checkbox无法正确的打上勾。 原因是 chkbox控件还没初始化(appendChild)，就开始操作它的结果
通过js动态创建标签,并设置属性方法
11-28
当我们在写jsp页面时，往往会遇到这种情况：从后台获取的数据个数不确定，此时在前端写jsp页面时也就不确定怎么设计了。这个时候就需要通过js动态创建标签： 1.创建某个标签：如下在body中创建一个div的事例； ...
关于html表格结构标签thead，tfoot，tbody使用出现不兼容性
front_endxiaobaia的博客
09-27 3169
关于尽量不使用thead，tfoot，tbody这三个表格结构标签，存在浏览器兼容性问题的验证 以下是不使用这三个标签时代码demo以及运行效果（搜狗浏览器下运行）： &amp;amp;lt;body&amp;amp;gt; &amp;amp;lt;table width=&amp;quot;700&amp;quot; height=&amp;quot;150&amp;quot; border=&amp;quot;1&amp;qu
IE中<table>元素不支持JS加入行appendChild
加俊
07-31 202
HTML中有一表格 &lt;table id="test"&gt;&lt;tr&gt;&lt;td&gt;&lt;img src="load.jpg"&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;  然后AJAX返回数据，在table中展现 var t=document.getElementById(&quot
js动态创建table节点并通过appendChild拼接子元素的问题
热门推荐
kunkkaCoco的专栏
07-17 1万+
今天看到一同学的贴子http://topic.csdn.net/u/20120717/10/51e85309-55e5-4f5a-bf0e-bef98c31ae23.html?seed=386935035&r=79147953#r_79147953，发现了常用的table中的一个误区，总结了一下 代码： //创建任意类型tag function make(tagname,attr
table下面appendChild别忘了tbody
weixin_33842304的博客
11-29 441
table下面appendChild别忘了tbody
【JS--DOM-节点操作2】--createElement()、appendChild()、insertBefore()、自定义的insertAfter()
~~
05-21 6288
document.createElement()是在对象中创建一个对象，要与appendChild() 或 insertBefore()方法联合使用。 appendChild() 方法在节点的子节点列表末添加新的子节点。 insertBefore() 方法在节点的子节点列表任意位置插入新的节点 -------------------------------------------------
JS中appendChild(Node)方法 追加or移动
张志勇的博客
07-23 1131
这个方法一般是在指定元素节点的最后一个子节点之后添加节点，但如果Node是页面中的DOM对象，那么就不是添加节点了，就是直接移动节点。 下面是一个实例： ` <title>表格排序</title> <style> table{ margin:0 auto; width:400p...
<!DOCTYPE html><html><head> <title>Cart</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body> <h1>Cart</h1> <table> <thead> <tr> <th>Product</th> <th>Quantity</th> </tr> </thead> <tbody id="cart"> </tbody> </table> <script> var cart = localStorage.getItem('cart'); if (cart) { cart = JSON.parse(cart); var cartTable = document.getElementById('cart'); for (var product in cart) { var row = document.createElement('tr'); var productCell = document.createElement('td'); productCell.textContent = product; var quantityCell = document.createElement('td'); quantityCell.textContent = cart[product]; row.appendChild(productCell); row.appendChild(quantityCell); cartTable.appendChild(row); } } else { alert('Your cart is empty'); } </script></body></html>
最新发布
06-06
<table> <thead> <tr> <th>Product</th> <th>Quantity</th> <th>Action</th> </tr> </thead> <tbody id="cart"> </tbody> </table> <form> <label for="product">Product:</label> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值