纯Javascript: onClick切换行/图像:Firefox/Chrome -工作:IE -不工作
Pure Javascript: onClick toggle rows/ image: Firefox/Chrome - works: IE - does not work
从Zeb Rawnsley(你太棒了!)那里得到了很多帮助，帮助我解决了前面的问题。
与一些代码一起工作，允许通过图像后面的可折叠链接隐藏从属行。这在Firefox和Chrome中工作得很好，但在IE(特别是我公司的ie8标准)的第一次迭代之后，图像就不能替换了。
感兴趣的部分在这里(我认为):
var closedImgHTML = "<img name='"togglepicture'" src='"http://www.iconlooker.com/user-content/uploads/wall/thumb/misc._icons_closed_folder.png'" border='"0'" height='"50'">";
var openImgHTML = "<img name='"togglepicture'" src='"http://www.iconlooker.com/user-content/uploads/wall/thumb/misc._icons_open_folder.png'" border='"0'" height='"50'">";
可能在这里(但我不这么认为):
lnk.innerHTML =(lnk.innerHTML == openImgHTML)?closedImgHTML:openImgHTML;
此CodePen适用于工作版本(Firefox/Chrome):
http://codepen.io/anon/pen/yjLvh工作版本的HTML:
<html>
<head>
<style type="text/css">
table { empty-cells: show; }
cell {font-family:'Calibri';font-size:11.0pt;color: #000000;}
TD{font-family: Calibri; font-size: 10.5pt;}
TH{font-family: Calibri; font-size: 10.5pt; }
</style>
</head>
<body>
<SCRIPT type=text/javascript>
var tbl;
var toggleimage=new Array("http://www.iconlooker.com/user-content/uploads/wall/thumb/misc._icons_open_folder.png","http://www.iconlooker.com/user-content/uploads/wall/thumb/misc._icons_closed_folder.png")
var closedImgHTML = "<img name='"togglepicture'" src='"http://www.iconlooker.com/user-content/uploads/wall/thumb/misc._icons_closed_folder.png'" border='"0'" height='"50'">";
var openImgHTML = "<img name='"togglepicture'" src='"http://www.iconlooker.com/user-content/uploads/wall/thumb/misc._icons_open_folder.png'" border='"0'" height='"50'">";
function trim(str){
return str.replace(/^'s*|'s*$/g,"");
}
function getParent(el, pTagName) {
if (el == null) return null;
else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) // Gecko bug, supposed to be uppercase
return el;
else
return getParent(el.parentNode, pTagName);
}
function toggleSection(lnk){
var td = lnk.parentNode;
var table = getParent(td,'TABLE');
var len = table.rows.length;
var tr = getParent(td, 'tr');
var rowIndex = tr.rowIndex;
var rowHead=table.rows[rowIndex].cells[1].innerHTML;
lnk.innerHTML =(lnk.innerHTML == openImgHTML)?closedImgHTML:openImgHTML;
vStyle =(tbl.rows[rowIndex+1].style.display=='none')?'':'none';
for(var i = rowIndex+1; i < len;i++){
if (table.rows[i].cells[1].innerHTML==rowHead){
table.rows[i].style.display= vStyle;
table.rows[i].cells[1].style.visibility="hidden";
}
}
}
function toggleRows(){
tables =document.getElementsByTagName("table");
for(i =0; i<tables.length;i++){
if(tables[i].className.indexOf("expandable") != -1)
tbl =tables[i];
}
if(typeof tbl=='undefined'){
alert("Could not find a table of expandable class");
return;
}
//assume the first row is headings and the first column is empty
var len = tbl.rows.length;
var link ='<a href="#" onclick="toggleSection(this);return false;" style="text-decoration: none">'+closedImgHTML+'</a>';
var rowHead = tbl.rows[1].cells[1].innerHTML;
for (j=1; j<len;j++){
//check the value in each row of column 2
var m = tbl.rows[j].cells[1].innerHTML;
if(m!=rowHead || j==1){
rowHead=m;
tbl.rows[j].cells[0].innerHTML = link;
// tbl.rows[j].cells[0].style.textAlign="center";
tbl.rows[j].style.background = "#FFFFFF";
}
else
tbl.rows[j].style.display = "none";
}
}
var oldEvt = window.onload;
var preload_image_1=new Image()
var preload_image_2=new Image()
preload_image_1.src=toggleimage[0]
preload_image_2.src=toggleimage[1]
var i_image=0
function testloading() {
isloaded=true
}
function toggle() {
if (isloaded) {
document.togglepicture.src=toggleimage[i_image]
}
i_image++
if (i_image>1) {i_image=0}
}
window.onload = function() { if (oldEvt) oldEvt(); toggleRows(); testloading();}
</SCRIPT>
<TABLE class=expandable width="400px" border="1" cellspacing="0" frame="box" rules="all" >
<THEAD>
<TR>
<TH bgColor="#E6E4D4"> </TH>
<TH bgColor="#E6E4D4" align="left">Manager</TH>
<TH bgColor="#E6E4D4" align="left">Sales Rep</TH>
<TH bgColor="#E6E4D4" align="left">Amount </TH></TR>
</THEAD>
<TBODY>
<TR>
<TD> </TD>
<TD>Sarah Jones</TD>
<TD><i>Georgia District Reps</i></TD>
<TD>500000</TD></TR>
<TR>
<TD> </TD>
<TD>Sarah Jones</TD>
<TD>Rex Smtih</TD>
<TD>350000</TD></TR>
<TR>
<TD> </TD>
<TD>Sarah Jones</TD>
<TD>Alex Anderson</TD>
<TD>150000</TD></TR>
<TR>
<TD> </TD>
<TD>William Hobby</TD>
<TD><i>Texas District Reps</i></TD>
<TD>630000</TD></TR>
<TR>
<TD> </TD>
<TD>William Hobby</TD>
<TD>Bill Smith</TD>
<TD>410000</TD></TR>
<TR>
<TD> </TD>
<TD>William Hobby</TD>
<TD>Simon Wilkes</TD>
<TD>220000</TD></TR>
</TBODY></font></TABLE>
<br>
<br>
<a href="javascript:toggle()"></a>
</body>
</html>
没有图像的前一组代码(使用文本打开/关闭)在所有浏览器中都可以正常工作。
不确定是否有IE或其他东西的图像语法问题。它肯定是专注于图像，因为，好吧，没有图像，它工作得很好。
这是在IE(和其他)中工作的版本(基于文本的)的CodePen。
http://codepen.io/anon/pen/morpF这是"ALL"浏览器版本的HTML
<html>
<head>
<style type="text/css">
table { empty-cells: show; }
cell {font-family:'Calibri';font-size:11.0pt;color: #000000;}
TD{font-family: Calibri; font-size: 10.5pt;}
TH{font-family: Calibri; font-size: 10.5pt; }
</style>
</head>
<body>
<SCRIPT type=text/javascript>
var tbl;
function trim(str){
return str.replace(/^'s*|'s*$/g,"");
}
function getParent(el, pTagName) {
if (el == null) return null;
else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase()) // Gecko bug, supposed to be uppercase
return el;
else
return getParent(el.parentNode, pTagName);
}
function toggleSection(lnk){
var td = lnk.parentNode;
var table = getParent(td,'TABLE');
var len = table.rows.length;
var tr = getParent(td, 'tr');
var rowIndex = tr.rowIndex;
var rowHead=table.rows[rowIndex].cells[1].innerHTML;
lnk.innerHTML =(lnk.innerHTML == "+")?"--":"+";
vStyle =(tbl.rows[rowIndex+1].style.display=='none')?'':'none';
for(var i = rowIndex+1; i < len;i++){
if (table.rows[i].cells[1].innerHTML==rowHead){
table.rows[i].style.display= vStyle;
table.rows[i].cells[1].style.visibility="hidden";
}
}
}
function toggleRows(){
tables =document.getElementsByTagName("table");
for(i =0; i<tables.length;i++){
if(tables[i].className.indexOf("expandable") != -1)
tbl =tables[i];
}
if(typeof tbl=='undefined'){
alert("Could not find a table of expandable class");
return;
}
//assume the first row is headings and the first column is empty
var len = tbl.rows.length;
var link ='<a href="#" onclick="toggleSection(this);return false;" style="text-decoration: none">+</a>';
var rowHead = tbl.rows[1].cells[1].innerHTML;
for (j=1; j<len;j++){
//check the value in each row of column 2
var m = tbl.rows[j].cells[1].innerHTML;
if(m!=rowHead || j==1){
rowHead=m;
tbl.rows[j].cells[0].innerHTML = link;
// tbl.rows[j].cells[0].style.textAlign="center";
tbl.rows[j].style.background = "#FFFFFF";
}
else
tbl.rows[j].style.display = "none";
}
}
var oldEvt = window.onload;
window.onload = function() { if (oldEvt) oldEvt(); toggleRows();}
</SCRIPT>
<TABLE class=expandable width="400px" border="1" cellspacing="0" frame="box" rules="all" >
<THEAD>
<TR>
<TH width="10%" bgColor="#E6E4D4"> </TH>
<TH bgColor="#E6E4D4" align="left">Manager</TH>
<TH bgColor="#E6E4D4" align="left">Sales Rep</TH>
<TH bgColor="#E6E4D4" align="left">Amount </TH></TR></THEAD>
<TBODY>
<TR class="cell">
<TD> </TD>
<TD>Sarah Jones</TD>
<TD> </TD>
<TD>500000</TD></TR>
<TR>
<TD> </TD>
<TD>Sarah Jones</TD>
<TD>Rex Smtih</TD>
<TD>350000</TD></TR>
<TR>
<TD> </TD>
<TD>Sarah Jones</TD>
<TD>Alex Anderson</TD>
<TD>150000</TD></TR>
<TR>
<TD> </TD>
<TD>William Jones</TD>
<TD> </TD>
<TD>620000</TD></TR>
<TR>
<TD> </TD>
<TD>William Jones</TD>
<TD>Bill Smith</TD>
<TD>410000</TD></TR>
<TR>
<TD> </TD>
<TD>William Jones</TD>
<TD>Simon Wilkes</TD>
<TD>220000</TD></TR>
</TBODY></font></TABLE></body>
</html>
谢谢!
不同的浏览器序列化DOM的方式不同。在IE10中运行你的代码会给我这个:
foo.innerHTML = "<img name='"togglepicture'" src='"http://www.iconlooker.com/user-content/uploads/wall/thumb/misc._icons_open_folder.png'" border='"0'" height='"50'">";
foo.innerHTML; // <img name="togglepicture" height="50" src="http://www.iconlooker.com/user-content/uploads/wall/thumb/misc._icons_open_folder.png" border="0">
IE重新排列了属性，所以你不再有相同的字符串。
与其在link元素中获取HTML，不如获取图像本身并查看其src属性
相关文章：
- xPages标签onclick事件不'不要在空白处工作
- 加载Soundcloud嵌入式播放器OnClick在FireFox中不工作
- JavaScript onclick在IE 9中工作两次，然后停止
- javascript(）onclick隐藏元素-dos'我不在firefox工作
- onclick'放在JavaScript脚本中时无法工作
- jquery onclick if..否则如果..否则无法正常工作
- onClick按钮不工作javascript/php/jquery mobile
- 按钮onclick函数在jquery中无法正常工作
- javascript动态生成的带有onclick事件的表无法正常工作
- onclick适用于一个按钮，但不适用于'不要为别人工作
- $(这个）没有't在onClick事件中不再工作
- Javascript:onclick函数工作一次，页面就会恢复到原来的状态
- 玩.onclick停止工作
- React组件onClick处理程序不工作
- 正在尝试使用onclick事件提交父窗体，无法工作
- JavaScript img onclick 引用错误才能正常工作
- 不触发 OnClick 事件 IE8，但在 Firefox 中工作正常
- 在 XSLT 中通过 onclick 事件传递变量无法正常工作
- 它不工作"onclick"使用attr()从JQuery
- 搜索表单不工作'onclick&;
