刚开始的时候所有的tr都是new一个element然后将td的html拼接好,设置到tr里,这种做出来的效果ff和chrome都好着。但是在ie8下就出现问题了,新增的项目的html代码是正常的,但是页面显示就不正常了,查看了下ie下的源码,发现开始的拼接好的html显示之后没有了前面的 <td id="id"> 导致页面样式错乱。最后的修改方式是:
new tr节点
new td节点,通过jquery设置td的属性,代码显示是我工程中的代码,可以参考下:
var tr = document.createElement("tr");
var td1 = document.createElement("td");
$(td1).attr("id",$("#selectbaseOn").val());
$(td1).text($("#selectbaseOn").find("option:selected").text());
tr.appendChild(td1);
以此添加所有的属性,
添加之后,表格就会以此生成每次添加到最下面,问题又来了,如果我要修改某一个tr里面的内容,将内容读取到页面其他部位之后,只能重新添到最后这个部位,这个问题该怎样解决,我想的修改的是那个部位的tr修改之后就会添加到原来的位置去:
定义全局变量来保存当前tr的行
var indexRow = 0;
点击修改之后保存值,tr的拼接方式就是上面那种:
if(indexRow>0){
var insert = table.insertRow(indexRow);
insert.innerHTML = tr.innerHTML;
}else{
table.appendChild(tr);
}
indexRow =0;
由于我有表头所以indexRow的最小值是1的,
从其他地方看到很多种方法有 jquery版本的before,还有js版本的 appendchild insertBefore以及insertAfter的用法,可以根据自己的情况选择,我是初学者,只想着先做出来,于是就选择了上面的方法,也是对我来说最快的方法了