javascript 实现table展开折叠

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <meta http-equiv="Content-Style-Type" content="text/css" />  
  6.     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />  
  7. <title>案件一覧</title>  
  8. <script type="text/javascript">  
  9. <!--  
  10. // 検索条件表示切替  
  11. function searchChange() {  
  12.     if (document.getElementById("searchChangeFlg").value == "1") {  
  13.         document.getElementById("tr2").style.display="block";  
  14.         document.getElementById("tr3").style.display="block";  
  15.         document.getElementById("tr4").style.display="block";  
  16.         document.getElementById("searchChange").innerHTML = "－";  
  17.         document.getElementById("searchChangeFlg").value = "0";  
  18.     } else {  
  19.         document.getElementById("tr2").style.display="none";  
  20.         document.getElementById("tr3").style.display="none";  
  21.         document.getElementById("tr4").style.display="none";  
  22.         document.getElementById("searchChange").innerHTML = "＋";  
  23.         document.getElementById("searchChangeFlg").value = "1";  
  24.     }  
  25.   
  26.     return false;  
  27. }  
  28. // -->  
  29. </script>  
  30. <style>  
  31. table  {  
  32.     border-collapse:collapse;  
  33.     width:50%;  
  34. }  
  35. th {  
  36.     border:1px solid black;  
  37. }  
  38. td {  
  39.     border:1px solid black;  
  40. }  
  41. </style>  
  42. </head>  
  43. <body>  
  44. <table>  
  45. <tr id="tr1">  
  46. <th colspan="1" width="1%">  
  47. <a id="searchChange" onclick="return searchChange()" href="">－</a>  
  48. </th>  
  49. <th colspan="4">  
  50. title  
  51. </th>  
  52. </tr>  
  53. <tr id="tr2">  
  54. <td rowspan="3"> </td>  
  55. <td>123456</td>  
  56. <td>789456</td>  
  57. <td>017852</td>  
  58. <td>698852</td>  
  59. </tr>  
  60. <tr id="tr3">  
  61. <td>apple</td>  
  62. <td>bags</td>  
  63. <td>balana</td>  
  64. <td>orange</td>  
  65. </tr>  
  66. <tr id="tr4">  
  67. <td>１２３４５</td>  
  68. <td>６７８９０</td>  
  69. <td>１２３４５</td>  
  70. <td>６７８９０</td>  
  71. </tr>  
  72. </table>  
  73.   
  74. <input type="hidden" name="searchChangeFlg" id="searchChangeFlg" value="0" />  
  75.   
  76. </body>  
  77. </html> 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <meta http-equiv="Content-Style-Type" content="text/css" />  
  6.     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />  
  7. <title>案件一覧</title>  
  8. <script type="text/javascript">  
  9. <!--  
  10. // 検索条件表示切替  
  11. function searchChange() {  
  12.     if (document.getElementById("searchChangeFlg").value == "1") {  
  13.         document.getElementById("tr2").style.display="block";  
  14.         document.getElementById("tr3").style.display="block";  
  15.         document.getElementById("tr4").style.display="block";  
  16.         document.getElementById("searchChange").innerHTML = "－";  
  17.         document.getElementById("searchChangeFlg").value = "0";  
  18.     } else {  
  19.         document.getElementById("tr2").style.display="none";  
  20.         document.getElementById("tr3").style.display="none";  
  21.         document.getElementById("tr4").style.display="none";  
  22.         document.getElementById("searchChange").innerHTML = "＋";  
  23.         document.getElementById("searchChangeFlg").value = "1";  
  24.     }  
  25.   
  26.     return false;  
  27. }  
  28. // -->  
  29. </script>  
  30. <style>  
  31. table  {  
  32.     border-collapse:collapse;  
  33.     width:50%;  
  34. }  
  35. th {  
  36.     border:1px solid black;  
  37. }  
  38. td {  
  39.     border:1px solid black;  
  40. }  
  41. </style>  
  42. </head>  
  43. <body>  
  44. <table>  
  45. <tr id="tr1">  
  46. <th colspan="1" width="1%">  
  47. <a id="searchChange" onclick="return searchChange()" href="">－</a>  
  48. </th>  
  49. <th colspan="4">  
  50. title  
  51. </th>  
  52. </tr>  
  53. <tr id="tr2">  
  54. <td rowspan="3"> </td>  
  55. <td>123456</td>  
  56. <td>789456</td>  
  57. <td>017852</td>  
  58. <td>698852</td>  
  59. </tr>  
  60. <tr id="tr3">  
  61. <td>apple</td>  
  62. <td>bags</td>  
  63. <td>balana</td>  
  64. <td>orange</td>  
  65. </tr>  
  66. <tr id="tr4">  
  67. <td>１２３４５</td>  
  68. <td>６７８９０</td>  
  69. <td>１２３４５</td>  
  70. <td>６７８９０</td>  
  71. </tr>  
  72. </table>  
  73.   
  74. <input type="hidden" name="searchChangeFlg" id="searchChangeFlg" value="0" />  
  75.   
  76. </body>  
  77. </html> 
posted @ 2016-05-25 14:17  我在码头等你  阅读(2813)  评论(0)  编辑  收藏  举报