纯Javascript:onClick切换行/image:Firefox/Chrome-works:IE-不起作用_Javascript_Image_Internet Explorer_Google Chrome_Firefox

纯Javascript:onClick切换行/image:Firefox/Chrome-works:IE-不起作用

javascript image internet-explorer google-chrome firefox

纯Javascript:onClick切换行/image:Firefox/Chrome-works:IE-不起作用,javascript,image,internet-explorer,google-chrome,firefox,Javascript,Image,Internet Explorer,Google Chrome,Firefox,Zeb Rawnsley（你太棒了！）帮我解决了我当前问题的前一个问题使用一些代码，允许通过图像后面的可折叠链接隐藏从属行。这在Firefox和Chrome中运行得非常好，但在IE（IE 8，特别是我公司的标准）中的第一次迭代后，图像不会交替感兴趣的部分在这里（我认为）： var closedImgHTML=”“ var openImgHTML=”“ 可能在这里（但我不这么认为）：此代码笔用于工作版本（Firefox/Chrome）：这是工作版本的HTML： <html>

Zeb Rawnsley（你太棒了！）帮我解决了我当前问题的前一个问题

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

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

var closedImgHTML=”“
var openImgHTML=”“
可能在这里（但我不这么认为）：
此代码笔用于工作版本（Firefox/Chrome）：

这是工作版本的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>


表{空单元格：显示；}
单元格{字体系列：'Calibri'；字体大小：11.0pt；颜色：#000000；}
TD{font-family:Calibri；字体大小：10.5pt；}
TH{字体系列：Calibri；字体大小：10.5pt；}
var-tbl；
var toggleimage=新数组（“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=“”；
var openImgHTML=“”；
功能微调（str）{
返回str.replace（/^\s*|\s*$/g，”）；
}
函数getParent（el、pTagName）{
如果（el==null）返回null；
else if（el.nodeType==1&&el.tagName.toLowerCase（）==pTagName.toLowerCase（））//Gecko bug，应该是大写的
返回el；
其他的
返回getParent（el.parentNode，pTagName）；
}
功能切换部分（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]。单元格[1]。innerHTML；
lnk.innerHTML=（lnk.innerHTML==openImgHTML）？closedImgHTML:openImgHTML；
vStyle=（tbl.rows[rowIndex+1].style.display=='none'）？''：'none'；
对于（var i=rowIndex+1；i对于（i=0；i不同的浏览器以不同的方式序列化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">

foo.innerHTML=“”；
foo.innerHTML；//

IE重新排列了属性，因此您不再具有相同的字符串
不要在link元素中获取HTML，而是获取图像本身并查看其src
属性。
Dennis，我理解你的意思，但我真的不确定接下来的步骤是什么。你能给出任何额外的方向吗？即使我删除了任何可能被“重新定位”的违规标记该切换在IE中仍然不起作用。var closedImgHTML=“”；

var openImgHTML=“”；
很抱歉，这太麻烦了。我不知道如何添加换行符。说明中说
但这不起作用。回到我关于删除属性的输入。我需要“border=0”属性，否则IE将显示那该死的蓝色边框。在这里搜索无效。在这里大声思考。与其检查innerhtml的值，我应该假设它开始时是关闭的，如果单击则更改为打开。然后再次单击时，评估图像源并返回相反的结果。我需要使用“如果”语句而不是三元计算。我想更简单的方法是计算源代码并返回相反的结果。页面将始终加载一个封闭的图像。
<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>

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">