2015.3.7小练习(动态增加元素及表格,以及浏览器兼容问题)
2015-03-07 22:11
387 查看
最近在对之前理解的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就可以解决这个问题。
今天是做了一个根本无界面美观性可言的实验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就可以解决这个问题。
相关文章推荐
- jquery动态增加表格表单行来插入数据-------遇到的兼容问题和radio问题
- jquery动态增加表格表单行来插入数据-------遇到的兼容问题和radio问题
- javascript实现动态增加删除表格行(兼容IE/FF)
- Javascript中的线程以及获取动态Dom元素的问题
- setTimeout函数以及在各个浏览器里的兼容问题
- 使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
- 动态增加删除表格行(兼容IE/FF)
- Javascript中的线程以及获取动态Dom元素的问题--thread/appendChild/setTimeout
- 动态增加删除表格行(兼容IE/FF)
- jquery 实现表格内的tr与td,动态添加与删除. 以及序号增加与减少,大多用在Form里
- javascript以及css的浏览器兼容问题
- 动态增加删除表格行(兼容IE/FF)
- js动态添加删除表格元素(兼容IE和Firefox)
- IE6以及各个浏览器常见兼容问题 大汇总 【转】
- IE6以及各个浏览器常见兼容问题
- 动态增加删除表格行(兼容IE/FF)
- js动态创建input元素,增加点击事件遇到的问题
- 完美兼容IE_Opera_Firefox等主流浏览器的锁定表格的 表头以及表头列
- 动态增加删除表格行(兼容IE/FF)
- [转]使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE