堆栈内存溢出
  繁体   English   中英

纯Javascript：onClick切换行/图像：Firefox / Chrome - 工作原理：IE - 不起作用

[英]Pure Javascript: onClick toggle rows/ image: Firefox/Chrome - works: IE - does not work

 原文  2013-03-24 15:35:38  2   1    javascript/ image/ internet-explorer/ google-chrome/ firefox

问题描述

从Zeb Rawnsley（你摇滚！）获得了一些很好的帮助，将前面的问题解决到我当前的问题。

使用一些代码以允许通过图像后面的可折叠链接隐藏下级行。 这在Firefox和Chrome中运行得非常好，但是在IE中的第一次迭代（IE 8，特别是我公司的标准）后，图像不会交替出现。

感兴趣的部分在这里（我认为）：

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">&nbsp;</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>&nbsp;</TD>
    <TD>Sarah Jones</TD>
    <TD><i>Georgia District Reps</i></TD>
    <TD>500000</TD></TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>Sarah Jones</TD>
    <TD>Rex Smtih</TD>
    <TD>350000</TD></TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>Sarah Jones</TD>
    <TD>Alex Anderson</TD>
    <TD>150000</TD></TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>William Hobby</TD>
    <TD><i>Texas District Reps</i></TD>
    <TD>630000</TD></TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>William Hobby</TD>
    <TD>Bill Smith</TD>
    <TD>410000</TD></TR>
  <TR>
    <TD>&nbsp;</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

这是“所有”浏览器版本的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">&nbsp;</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>&nbsp;</TD>
    <TD>Sarah Jones</TD>
    <TD>&nbsp</TD>
    <TD>500000</TD></TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>Sarah Jones</TD>
    <TD>Rex Smtih</TD>
    <TD>350000</TD></TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>Sarah Jones</TD>
    <TD>Alex Anderson</TD>
    <TD>150000</TD></TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>William Jones</TD>
    <TD>&nbsp;</TD>
    <TD>620000</TD></TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>William Jones</TD>
    <TD>Bill Smith</TD>
    <TD>410000</TD></TR>
  <TR>
    <TD>&nbsp;</TD>
    <TD>William Jones</TD>
    <TD>Simon Wilkes</TD>
    <TD>220000</TD></TR>
</TBODY></font></TABLE></body>
</html>

谢谢！

1 个解决方案

解决方案1
 2 已采纳  2013-03-24 16:02:25

不同的浏览器以不同方式序列化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重新排列了属性，因此您不再拥有相同的字符串。

而不是在链接元素中获取HTML，获取图像本身并查看其src属性。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Javascript onclick仅适用于chrome，不适用于Firefox或IE Onclick在IE或Firefox中无法使用，但在Chrome中可以使用 纯Javascript：onClick执行切换行-需要图像交换 onclick javascript函数不适用于Firefox / IE javascript onclick在chrome和IE8中不起作用，但在firefox 7.0.1中起作用 Javascript getElementById 不适用于 chrome 但适用于 Firefox javascript在Chrome中有效，在IE中不起作用 JavaScript可在FireFox上使用，但不能在Chrome或IE上使用 Javascript适用于Chrome，但不适用于IE或Firefox Javascript适用于Chrome，但不适用于IE或Firefox
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM