纯Javascript:onClick执行切换行 - 需要图像交换

时间:2013-03-23 16:05:15

标签: javascript image onclick

第一篇文章,长时间的观察。 Stack Overflow ROCKS!

需要一些帮助。我主要是商业智能/数据仓库专业人士。我需要使用一些Javascript在报表编写工具中创建折叠行报表,我无法预料到调用JQuery(内部LAN部署)的能力。因此我需要纯粹的Javascript。

前提是我需要仅在经理/区级别打开报告,但能够打开区域群集以查看分配的销售代表及其贡献。

我找到了执行此操作的代码(实际上通过隐藏重复的区域管理器的名称很好),但它使用文本对象(“+”和“ - ”)来呈现OnClick事件后面的链接。我真的,真的,真的,真的需要让它显示交替的图像。

我尝试简单地修改这两个部分,但是在第一个块中渲染图像的代码与第二个块的代码不匹配,这会导致三元操作失败并且图像不会按预期交替。

  1. lnk.innerHTML =(lnk.innerHTML == "+")?"--":"+";

  2. var link ='<a href="#" onclick="toggleSection(this);return false;" style="text-decoration: none">+</a>';

  3. 下面的代码包含带有onClick操作文本的工作代码,以及一个用于切换图像的简单onClick。基本上我需要将文件夹图标放在Manager / District网格的第一个单元格中。为了节省空间,我将工作崩溃代码强制进入主Javascript块。

    任何帮助,见解,指导,电牛产品冲击(哎哟)都将不胜感激。

    提前致谢。

    更新:为此创建了一个CodePen,以便更容易看到现在有效:

    http://codepen.io/anon/pen/yjLvh

    谢谢!

    <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")
    
    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;
    
    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()"><img name="togglepicture" src="http://www.iconlooker.com/user-content/uploads/wall/thumb/misc._icons_closed_folder.png" border="0"></a>
    
    
    </body>
    </html>
    

1 个答案:

答案 0 :(得分:0)

working demo

<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=\"20\">";

  var openImgHTML = "<img name=\"togglepicture\" src=\"http://www.iconlooker.com/user-content/uploads/wall/thumb/misc._icons_open_folder.png\" border=\"0\" height=\"20\">";

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>