首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > JAVA > J2EE开发 >

菜鸟要隐藏table中指定的行

2011-12-25 
菜鸟求助:要隐藏table中指定的行HTML code%@ page languagejava importjava.util.* pageEncoding

菜鸟求助:要隐藏table中指定的行

HTML code
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">        <title>My JSP 'index.jsp' starting page</title>    <meta http-equiv="pragma" content="no-cache">    <meta http-equiv="cache-control" content="no-cache">    <meta http-equiv="expires" content="0">        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="This is my page">    <!--    <link rel="stylesheet" type="text/css" href="styles.css">    -->        <script type="text/javascript">        function changeview(){        var target = document.getElementById("datas");        var targets = document.getElementsByName("")        if(target.style.display == "none"){            target.style.display = "";        }else{            target.style.display = "none"        }    }        </script>      </head>    <body>          <table id="salereport" border="1" bordercolor="green" cellspacing="0" width="800px" >                <tr align="center">            <td class="headline">地域</td>            <td class="headline">电视</td>            <td class="headline">手机</td>            <td class="headline">电话</td>            <td class="headline">冰箱 </td>            <td class="headline">洗衣机</td>            <td class="headline">电脑</td>        </tr>        <tr>            <td><a href="javascript:void(0);" onclick="changeview();">重庆</a></td>            <td>200</td>            <td>400</td>            <td>300</td>            <td>500</td>            <td>250</td>            <td>700</td>        </tr>        <tr id="datas">            <td>&nbsp&nbsp&nbsp&nbsp铜梁</td>            <td >100</td>            <td>200</td>            <td>100</td>            <td>400</td>            <td>100</td>            <td>500</td>        </tr>        <tr>            <td>&nbsp&nbsp&nbsp&nbsp奉节</td>            <td>100</td>            <td>200</td>            <td>200</td>            <td>100</td>            <td>150</td>            <td>200</td>        </tr>                        </table>    </body></html>

我的想法是,点击重庆就会隐藏或显示铜梁和奉节这两行数据,现在的设计只能隐藏和显示铜梁这一行的数据。原本打算用document.getElementsByName,然后再遍历设置style属性,但是<tr>没有name属性,而且真正的项目中会有很多个市及其下的县,即使能加上name属性也不好实现,因为要求点不同的城市只能隐藏或显示对应的县的数据,自然name属性也会有很多个,这样js就需要判断(感觉太繁琐了,这样下去),我该怎么做呢

[解决办法]
以上是根据中文来定位需要隐藏的行,最好给每行加上一个ID列 用ID列的值来过滤 而不是通过innerText的中文来过滤
[解决办法]
探讨
以上是根据中文来定位需要隐藏的行,最好给每行加上一个ID列 用ID列的值来过滤 而不是通过innerText的中文来过滤



[解决办法]
路过帮顶
[解决办法]
HTML code
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <base href="<%=basePath%>">        <title>My JSP 'index.jsp' starting page</title>    <meta http-equiv="pragma" content="no-cache">    <meta http-equiv="cache-control" content="no-cache">    <meta http-equiv="expires" content="0">        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="This is my page">    <!--    <link rel="stylesheet" type="text/css" href="styles.css">    -->        <script type="text/javascript">        function changeview(city){        var target = document.getElementById(city);        if(target.style.display == "none"){            target.style.display = "";        }else{            target.style.display = "none"        }    }        </script>      </head>    <body>          <table id="salereport" border="1" bordercolor="green" cellspacing="0" width="800px" >                <tr align="center">            <td class="headline">地域</td>            <td class="headline">电视</td>            <td class="headline">手机</td>            <td class="headline">电话</td>            <td class="headline">冰箱 </td>            <td class="headline">洗衣机</td>            <td class="headline">电脑</td>        </tr>        <tr>            <td><a href="javascript:void(0);" onclick="changeview('congqing');">重庆</a></td>            <td>200</td>            <td>400</td>            <td>300</td>            <td>500</td>            <td>250</td>            <td>700</td>        </tr>        <tr id="congqing">            <td>                <table>                    <tr>                        <td>&nbsp&nbsp&nbsp&nbsp铜梁</td>                        <td >100</td>                        <td>200</td>                        <td>100</td>                        <td>400</td>                        <td>100</td>                        <td>500</td>                    </tr>                    <tr>                        <td>&nbsp&nbsp&nbsp&nbsp奉节</td>                        <td>100</td>                        <td>200</td>                        <td>200</td>                        <td>100</td>                        <td>150</td>                        <td>200</td>                    </tr>                </table>            </td>        </tr>    </table>    </body></html>
[解决办法]
哦, 那里的td里面要加上, colspan="7"
还有就是, 样式你要重新设置下,
------解决方案--------------------


tr css: display:none
[解决办法]
可以在functions(this)这个试试,可以通过this。getpartentNote来操作当前所选的tr对象

热点排行