菜鸟要隐藏table中指定的行

菜鸟求助：要隐藏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的中文来过滤

菜鸟要隐藏table中指定的行

相关推荐