一种用按钮控制隐藏与显示统计图的实现方式

需求描述

客户希望第一次在网页上展现带统计图的报表时，统计图不显示，当用户点击按钮时，统计图可以在显示与隐藏状态切换。

需求实现

第一步，设计报表如下：

第二步，在jsp中添加如下Javascript代码：

<script language=”javascript”>

function hidden(){

var r_row = document.getElementById(“report1″).rows.length;

var v_row;

var v;

for (var i = 0;i<r_row ;i++ )

{

var j = i-1;

var v_row = document.getElementById(“report1″).rows[i];

var v = v_row.cells[0].innerText;

if(v == “graph1″){

var d = document.getElementById(“report1″).rows[parseInt(j)].style.display;

if(d==”"||d==”block”){

document.getElementById(“report1″).rows[parseInt(j)].style.display=”none”;

}else

{

document.getElementById(“report1″).rows[parseInt(j)].style.display=”block”;

}

}else{

continue;

}

continue;

}

}

window.onload=hidden;

</script>

第三步，页面中查看：

点击按钮：

利用统计图所在单元格下面的单元格的内容定位统计图所在单元格，然后利用js来控制显示与隐藏。