zoukankan      html  css  js  c++  java
  • 实现表格中每行展开收起内容

    效果图:

    html:

    <table>
                                    <tr>
                                        <th style="130px;">类型</th>
                                        <th style="138px;">测试</th>
                                        <th style="90px;">途径</th>
                                        <th style="100px;">数据</th>
                                        <th>剂量</th>
                                        <th style="250px;">作用</th>
                                    </tr>
                                    <tr class="item-tr">
                                        <td>ree</td>
                                        <td>tgtg</td>
                                        <td>fgfgf/td>
                                        <td>fhghg </td>
                                        <td>643 mg/kg</td>
                                        <td>
                                            <ul>
                                                aaa
                                                <a class="unfold" href="javascript:;">查看</a>
                                            </ul>
                                        </td>
                                    </tr>
                        
                      <tr class="doc-tr none">
                                        <td colspan="6">
                                            <div class="document">
                                                <span>detail:</span>
                                                <p>aaaaartrtrrytry</p>
                                            </div>
                                        </td>
                                    </tr>
                      <tr class="item-tr">
                                        <td>ree</td>
                                        <td>tgtg</td>
                                        <td>fgfgf/td>
                                        <td>fhghg </td>
                                        <td>643 mg/kg</td>
                                        <td>
                                            <ul>
                                                aaa
                                                <a class="unfold" href="javascript:;">查看</a>
                                            </ul>
                                        </td>
                                    </tr>
                        
                      <tr class="doc-tr none">
                                        <td colspan="6">
                                            <div class="document">
                                                <span>detail:</span>
                                                <p>aaaaartrtrrytry</p>
                                            </div>
                                        </td>
                                    </tr>
                      <tr class="item-tr">
                                        <td>ree</td>
                                        <td>tgtg</td>
                                        <td>fgfgf/td>
                                        <td>fhghg </td>
                                        <td>643 mg/kg</td>
                                        <td>
                                            <ul>
                                                aaa
                                                <a class="unfold" href="javascript:;">查看</a>
                                            </ul>
                                        </td>
                                    </tr>
                        
                      <tr class="doc-tr none">
                                        <td colspan="6">
                                            <div class="document">
                                                <span>detail:</span>
                                                <p>aaaaartrtrrytry</p>
                                            </div>
                                        </td>
                                    </tr>
    
    
                                    
    </table>

    js:

     $('table .item-tr a').click(function(){
        // $(this)
        if($(this).attr("class")=="unfold"){
          console.log(111)
          $(this).closest('.item-tr').next().show()
          $(this).removeClass('unfold').addClass('fold').text('收起')
        }else{
          $(this).closest('.item-tr').next().hide()
          $(this).removeClass('fold').addClass('unfold').text('查看')
        }
      })
  • 相关阅读:
    树状数组和线段树
    N皇后问题(函数式编程与过程式)
    单例模式
    BitSet
    蓄水池抽样问题
    关于动态规划的一些感想
    53最大子序和
    5最长回文子串
    139单词拆分
    91.解码方法
  • 原文地址:https://www.cnblogs.com/wszxx/p/10842724.html
Copyright © 2011-2022 走看看