码迷,mamicode.com
首页 > 其他好文 > 详细

2015.3.7小练习(动态增加元素及表格,以及浏览器兼容问题)

时间:2015-03-07 22:31:26      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:

      最近在对之前理解的HTML/CSS/javaScript查漏补缺,真是学会了Jquery马上就开始反感用javascript写很多jquery一下子就可以实现的选择和操作。

今天是做了一个根本无界面美观性可言的实验part,乱七八糟大乱炖,只为练习功能。

    动态增加元素

function addBtn() {
var textField = document.getElementById("main");
var input = document.createElement("input");
input.type = "button";
input.value = "我是动态的哟~";
textField.appendChild(input);
}
function creatA() {
var creatArea = document.getElementById("creatArea");
var a = document.createElement("a");
a.href = "http://www.baidu.com";
a.innerText = "百度一下,你就知道";
creatArea.appendChild(a);

}

动态创建表格,这里用到数组和JSON的概念;这里需要说明的是IE6,IE7是不支持table.appendChild("tr")指令的;在文章末尾会提到解决办法;

function createTable() {
   var data = { "淘宝": "http://www.taobao.com", "百度": "http://www.baidu.com", "新浪": "http://www.sina.com", "知乎": "http://www.zhihu.com" };
   var Area1 = document.getElementById("createArea");
   for (var key in data) {
       var value = data[key];
       var tr = document.createElement("tr");
       var td1 = document.createElement("td");
       td1.innerText = key;
       tr.appendChild(td1);

       var td2 = document.createElement("td");
       td2.innerHTML = "<a href=‘" + value + "‘>" + value + "</a>";
       tr.appendChild(td2);
       Area1.appendChild(tr);
}
}

 

针对浏览器不兼容的问题,增加表格行列可以使用如下代码:

var tr=Area.insertRow(-1);//这里的-1指的是最后一行;只有FireFox 中需要加(-1),IE 中则不需要。

var td=tr.insertCell(-1);

而产生这种不兼容性的原因是因为IE6,IE7默认的Table标签使用方法是表头下还有一个<Tbody></Tbody>

当我们直接执行上面的未调整的代码时,内容也被执行了添加操作,所以不会报错,但插入的地方却是和<Tbody></Tbody>标签平行,也就是在tbody的外面;

这也就导致了不能看到结果。

所以另外一种解决办法就是在写表格标签时添加<Tbody></Tbody>,并在函数的末尾动态增加元素时准确指向Tbody就可以解决这个问题。

2015.3.7小练习(动态增加元素及表格,以及浏览器兼容问题)

标签:

原文地址:http://www.cnblogs.com/shijia-dreamhome/p/4320874.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!