`
andongoop
  • 浏览: 61443 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

我的动态添加表格的一行

jQueryIEFirefoxJavaScript浏览器 
阅读更多 
<html>
<head>
</head>
<script>
var row_times = 3;
function add_tr(){
	var atable = document.getElementById("atable");
	var atr = document.createElement("tr");
	atr.border="1";
	var atd = document.createElement("td");
	atd.border="1";
	atd.height="30";
	var anode = document.createTextNode("第" + row_times++ +"行");
	atd.appendChild(anode);
	atr.appendChild(atd) ;
	atable.appendChild(atr) ;
}
</script>
<body>
<form>
<table id="atable" name="atable" border="1" width="98%">
<tr><td><input type="button" value="添加一行" onclick="javascript:add_tr();"</td></tr>
<tr>
<td>第一行</td>
</tr>
<tr>
<td>第二行</td>
</tr>
</table>
</form>
</body>
</html>

分享到：
| 我的js动态生成下拉列表框
评论
13 楼 andongoop 2009-09-16  
楼上那位大哥说的果然不错
在IE中table的子元素是tbody,在firefox中table的子元素是tr在这种情况下就涉及到一个兼容性的问题，一个比较不错的解决方案就是通过子元素去找父元素。要在IE中跑可以做如下修改
1、给table中的某一行加上id属性   例如：(id="atr")
2、获取tr然后通过tr拿到它的父元素。
3、将新增的tr加到父元素上。 
var row_times = 3;
function add_tr(){
	var firstRow = document.getElementById("firstRow");
	var atr = document.createElement("tr");
	atr.border="1";
	var atd = document.createElement("td");
	atd.border="1";
	atd.height="30";
	var anode = document.createTextNode("第" + row_times++ +"行");
	atd.appendChild(anode);
	atr.appendChild(atd) ;
	firstRow.parentNode.appendChild(atr);
}
12 楼 bimarcher 2009-09-15  
antiwise 写道
IE下跑不了


原因应该是IE下，table子是tbody吧？
楼主自己添加个不同浏览器的处理不就得了嘛。
更简单的方法，别获取table，获取一个始终存在的tr，然后使用tr.parentNode来appendChild新创建的行。
11 楼 bdceo 2009-09-15  
楼主是高开源的吧？哈哈，这代码也贴出来了...
10 楼 qiren83 2009-09-15  
有这么费事吗？ 倒 感觉小题大做了 随便找一个方式都更简单
9 楼 lobbychmd 2009-09-15  
Foxswily 写道
用jQuery一句话搞定的代码
$("#atable").append("<tr><td>新行</td></tr>");



$('atable tbody tr:first-child').clone().appendTo('atable tbody');
8 楼 bencode 2009-09-15  
这个应该在web编程里发的：）
7 楼 yuantong 2009-09-14  
Jwind 写道
要明白jquery也是对javascript的封装。

说明他封装的好嘛
6 楼 Jwind 2009-09-13  
要明白jquery也是对javascript的封装。
5 楼 kjj 2009-09-09  
还是jquery最好！！！
4 楼 andongoop 2009-09-09  
我又试了一下再IE中果然跑不了，我使用firefox做的测试。
浏览器之间的差异还很大，要写出兼容性很高的代码还要考虑很多内容，这是不是警示我们要用一些前端的js框架，比如jQuery等，这些框架已经解决了浏览器之间兼容性的问题。
3 楼 antiwise 2009-09-08  
IE下跑不了
2 楼 andongoop 2009-09-08  
刚才试了一下，JQUERY果然厉害。
1 楼 Foxswily 2009-09-08  
用jQuery一句话搞定的代码
$("#atable").append("<tr><td>新行</td></tr>");
发表评论

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

相关推荐

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