Home > Web Front-end > JS Tutorial > Some tips on using JS to operate page tables and elements_Basic knowledge

Some tips on using JS to operate page tables and elements_Basic knowledge

WBOY
Release: 2016-05-16 19:19:46
Original
1027 people have browsed it

(one)
IE, Firefox and other browsers have different operations on table tags. In IE, innerHTML assignment of table and tr is not allowed. When using js to add a tr, the appendChile method does not work. Here are the results of my tests on three browsers:

insertRow

IE6: Supported, and the default parameter is -1, which is added to the end by default

FireFox: Supported, but does not support default parameters

Opera: supports, supports default parameters, and is added to the front by default


AppendChild

IE6: Not supported

FireFox: Supported, but adding TR will not affect ROWS

Opera: Support, the effect is the same as insertRow(-1), affects ROWS

Follow the specifications to the maximum extent and you will be able to write safe and adaptable code:

//Append an empty row to the table:
var otr = otable.insertRow(-1);
var otd = document.createElement("td");
otd.innerHTML = " ";
otd.className = "XXXX";
otr.appendChild(otd);

This way it can run on these three browsers
(3) Operation of childNodes
(1)Attribute nodeName
Utils.getChildrenByTagName = function (node, tagName) {
var ln = node.childNodes.length;
var arr = [];
for (var z = 0; z if (node.childNodes[z].nodeName == tagName) {
arr.push(node.childNodes[z]);
}
}
return arr;
};
(2)Attribute id
function getNodeID(parent, id) {
var ln = parent.childNodes.length;
for (var z = 0; z if (parent.childNodes[z].id == id) {
                                      return parent.childNodes[z];
}
}
return null;
}
(3)Attribute className
corresponds to class, such as


function getElementsByClassName(node, className) {
var children = node.getElementsByTagName("*");
var elements = new Array();
for (var i = 0; i var child = children[i];
var classNames = child.className.split(" ");
for (var j = 0; j if (classNames[j] == className) {
elements.push(child);
break;
}
}
}
return elements;
}
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template