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

第一篇文章，很长一段时间的looker。堆栈溢出ROCKS！纯Javascript：onClick执行切换行 - 需要图像交换

需要一些帮助。我主要是商业智能/数据仓库专业人员。我需要使用一些Javascript来在报告编写工具中创建折叠行报告，但我无法预测能够调用JQuery（内部LAN部署）。所以我需要纯Javascript。

前提是我需要报告只在经理/地区级别打开行，但有能力打开分区集群以查看分配的销售代表及其贡献。

我发现这样做的代码（实际上隐藏了重复的区域管理器的名称），但它使用文本对象（“+”和“ - ”）来呈现OnClick事件后面的链接。我真的真的需要让它显示交替的图像。

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

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

下面的代码包含文本的onClick操作和下面的简单的onClick用于切换图像的工作代码。基本上我需要将文件夹图标放在Manager/District网格的第一个单元格中。为了节省空间，我强制将工作折叠代码放入主Javascript区块中。

任何帮助，见解，指导，电牛产品冲击（哎哟），将不胜感激。

在此先感谢。

UPDATE：创建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>

来源

2013-03-23 Novadar

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>

来源

2013-03-24 03:06:47

尼斯工作西勃。我努力寻找可以在代码的两个地方工作的图像的语法。我也很难找到一种可靠的方式来将图像表示为变量。你的最终解决方案表明我走在了正确的道路上。感谢帮助推动我顶过！干杯! – Novadar 2013-03-24 03:38:22

Zeb，快速提问。看起来，如果我对图像网址进行了任何更改，代码就会吓倒。即使我删除高度属性切换不能正常工作。有任何想法吗？我实际上需要使用完全不同的图像，我只是从互联网上放置一个来帮助直接获得代码。 – Novadar 2013-03-24 04:43:23

控制台中是否有语法错误？（例如在Chrome中，按F12并点击页面上的控制台）如果您将代码发布到实际图像url，我会看一看 – 2013-03-24 04:52:50

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

回答

相关问题