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

最新推荐文章于 2021-06-09 21:33:02 发布
最新推荐文章于 2021-06-09 21:33:02 发布
阅读量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
关注
专栏目录
<marquee>
易天海
11-16 542
已废弃  This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it. HTML marquee 元素（&lt;marquee&gt;） 用来插入...
HTML5新增标签
Ywm103025的博客
12-05 2382
HTML5新增标签 作者: 严孝孝 目录 1.html5新标签 2.html5新input类型 3.html5新input属性 4.html5shiv库 课程内容 1.html5新标签 q.html5 新标签有哪些？ header，footer，section，nav， aside， article 语义化标签 details， summary 详情和摘要 dialog &lt;...
appendChild 函数
liuyj_vv的博客
10-10 4429
appendChild() 方法向节点添加最后一个子节点。 appendChild() 方法从一个元素向另一个元素中移动元素。 <body> <button onclick="test1()">test1</button> <button onclick="test2()">test2</button> <butt...
解决ie6 ie7中js不能通过appendChild("tr")添加table行的方法
wasw100
09-22 309
本机只有ie7,ff3.5,opera10，测试在这三个环境中测试通过。   在标准DOM中添加元素一般使用appendChild();但用js在table中添加行时却失效了。 网上搜了一下说 ie6，ie7不支持table.appendChild("tr") 那在JavaScript中怎么在一个table中添加一行呢？在http://www.w3schools.com/htmldom/d...
IE中table标签不支持javascript的appendChild方法
whxblue的专栏
04-09 2369
如题：IE中table标签不支持javascript的appendChild方法 var tbl = document.createElement('table'); var tr = document.createElement("tr"); tbl.appendChild(tr); 类似这种代码在IE中是没有效果的，FF中正常，，，，PS：BS IE浏览器。。。。。
IE中<table>元素不支持JS加入行appendChild
加俊
07-31 232
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
IE6,7table不支持innerHTML,appendChild问题解决
u012901416的专栏
12-06 133
[size=medium]发现垃圾IE下table不支持innerHTML,appendChild方法 只能用table特有的方法来处理 详细方法见[url]http://www.w3school.com.cn/htmldom/dom_obj_table.asp[/url] deleteRow() 从表格删除一行。 insertRow() 在表格中插入一个新行。[/size] [code...
IE6-IE9中tbody的innerHTML不能赋值的解决方法
09-04
在IE6到IE9这四个版本的Internet Explorer浏览器中，存在一个与DOM操作相关的兼容性问题，即不能直接通过`innerHTML`属性来设置`<tbody>`元素的内容。这个问题主要是由于这些旧版本的IE浏览器对HTML标准的支持不完整...
jquery appen table 问题 ie8下解决方法
04-14
- 动态创建表格结构：使用`document.createElement()`函数创建`<tr>`、`<td>`等元素，并通过`.appendChild()`方法将它们添加到正确的父元素中。 - 使用jQuery的`$(element).html()`：在IE8中，有时直接用字符串...
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐) .zip
最新发布
04-21
var xmlString = "<root><item>数据</item></root>"; var xmlDoc = parser.parseFromString(xmlString, "text/xml"); ``` 3. **处理解析结果**：解析后的XML文档将是一个`Document`对象，你可以通过遍历其节点来...
IE 兼容模式下Jquery 出现appendChild 意外地调用了方法或属性访问。
u014467070的博客
02-17 4379
IE 兼容模式下 appendChild  意外地调用了方法或属性访问。 原因：在ie8以下的浏览器里，操作一个DOM的非法属性时会出现 例如： 1、操作了一个DOM不该有的属性 如果要改变这个dom的值应该是修改它的value属性 $('#test').val('hello'); 但是如果写成了 $('#test').html('hello'); 在ie8以上的浏览器也O
IE下appendChild 无法实现此接口（在FF下可以）
wufan0023的专栏
03-20 143
由于报错的位置和实际出错的代码关联性不强，找了好一会才找到。 看下源代码： 父页面中，html中插入div： [code="HTML"][/code] 在pop-up页面中插入表格： [code="js"]function ctTabInsert(){ var ctTab = self.opener.document.getElementById('ctTab'); ct...
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
FAQ_IE 8中还不支持JavaScript通过appendChild("tr')方法添加Table行
HelloWorld
06-11 1571
<br /><html><br /><head><br /><script type="text/javascript"><br />function addTable()<br />{<br />    var tr = document.createElement("tr");<br />    var cell = createCellWithText("aaa");<br />    tr.appendChild(cell);<br /><br />    document.getElementBy
DOM动态添加与删除HTML节点：appendChild()、removeChild()函数
热门推荐
pan_junbiao的博客
07-07 1万+
1、函数语法 createElement(name)：方法可创建元素节点，此方法可返回一个 Element 对象。 appendChild(node)：方法在指定元素节点的最后一个子节点之后添加节点，该方法返回新的子节点。 removeChild(node)：方法可从子节点列表中删除某个节点。 elementNode.childNodes：属性返回包含被选节点的子节点的 NodeList。...
在IE中使用appendChild向中增加到中不会显示的技巧
anwanfu的专栏
05-09 1416
如果使用appendChild向中增加到中，则在IE中这一行并不会出现，但在其它浏览器中却会显示出来。可以将元素增加到表的元素中。这种方法可以在所有的浏览器中正常工作，如下例所示。                        First name:                                        Middle name:                   
html table 下一级节点,js动态创建table节点并通过appendChild拼接子元素的问题
weixin_35545782的博客
06-09 470
今天看到一同学的贴子http://topic.csdn.net/u/20120717/10/51e85309-55e5-4f5a-bf0e-bef98c31ae23.html?seed=386935035&r=79147953#r_79147953，发现了常用的table中的一个误区，总结了一下代码：//创建任意类型tagfunction make(tagname,attributes,c...
关于html表格结构标签thead，tfoot，tbody使用出现不兼容性
front_endxiaobaia的博客
09-27 3241
关于尽量不使用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
table下面appendChild别忘了tbody
weixin_33842304的博客
11-29 457
table下面appendChild别忘了tbody
<!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
好的，以下是添加删除物品和更改物品数量的功能的代码示例，基于 JavaScript： ```html <!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> <th>Action</th> </tr> </thead> <tbody id="cart"> </tbody> </table> <form> <label for="product">Product:</label> <input type="text" id="product" name="product" required> <label for="quantity">Quantity:</label> <input type="number" id="quantity" name="quantity" required> <button type="submit" id="add">Add to Cart</button> </form> <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]; var actionCell = document.createElement('td'); var deleteButton = document.createElement('button'); deleteButton.textContent = 'Delete'; deleteButton.addEventListener('click', function(event) { var product = event.target.parentNode.parentNode.querySelector('td:first-child').textContent; delete cart[product]; localStorage.setItem('cart', JSON.stringify(cart)); event.target.parentNode.parentNode.remove(); }); var editButton = document.createElement('button'); editButton.textContent = 'Edit'; editButton.addEventListener('click', function(event) { var product = event.target.parentNode.parentNode.querySelector('td:first-child').textContent; var quantity = parseInt(prompt('Enter new quantity for ' + product + ':', cart[product])); if (!isNaN(quantity) && quantity >= 0) { cart[product] = quantity; localStorage.setItem('cart', JSON.stringify(cart)); event.target.parentNode.parentNode.querySelector('td:nth-child(2)').textContent = quantity; } else { alert('Invalid quantity'); } }); actionCell.appendChild(deleteButton); actionCell.appendChild(editButton); row.appendChild(productCell); row.appendChild(quantityCell); row.appendChild(actionCell); cartTable.appendChild(row); } } else { alert('Your cart is empty'); } document.getElementById('add').addEventListener('click', function(event) { event.preventDefault(); var product = document.getElementById('product').value; var quantity = parseInt(document.getElementById('quantity').value); if (product && !isNaN(quantity) && quantity >= 0) { if (cart) { if (cart[product]) { cart[product] += quantity; } else { cart[product] = quantity; } } else { cart = {}; cart[product] = quantity; } localStorage.setItem('cart', JSON.stringify(cart)); var cartTable = document.getElementById('cart'); var row = document.createElement('tr'); var productCell = document.createElement('td'); productCell.textContent = product; var quantityCell = document.createElement('td'); quantityCell.textContent = cart[product]; var actionCell = document.createElement('td'); var deleteButton = document.createElement('button'); deleteButton.textContent = 'Delete'; deleteButton.addEventListener('click', function(event) { var product = event.target.parentNode.parentNode.querySelector('td:first-child').textContent; delete cart[product]; localStorage.setItem('cart', JSON.stringify(cart)); event.target.parentNode.parentNode.remove(); }); var editButton = document.createElement('button'); editButton.textContent = 'Edit'; editButton.addEventListener('click', function(event) { var product = event.target.parentNode.parentNode.querySelector('td:first-child').textContent; var quantity = parseInt(prompt('Enter new quantity for ' + product + ':', cart[product])); if (!isNaN(quantity) && quantity >= 0) { cart[product] = quantity; localStorage.setItem('cart', JSON.stringify(cart)); event.target.parentNode.parentNode.querySelector('td:nth-child(2)').textContent = quantity; } else { alert('Invalid quantity'); } }); actionCell.appendChild(deleteButton); actionCell.appendChild(editButton); row.appendChild(productCell); row.appendChild(quantityCell); row.appendChild(actionCell); cartTable.appendChild(row); } else { alert('Invalid product or quantity'); } }); </script> </body> </html> ``` 这个代码添加了一个表单，用于添加新的产品和数量，并且在现有的表格中添加了一个“操作”列，其中包括删除和编辑按钮。删除按钮删除该行中的产品，并从 localStorage 中删除该产品的条目。编辑按钮提示用户输入新数量，然后更新该产品的数量和 localStorage 条目中的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值