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('查看')
        }
      })
  • 相关阅读:
    Microsoft Excel 不能使用对象链接和嵌入的错误/cannot use object linking and enbedding
    (转)QML代码与现有Qt UI代码整合
    vs2012编译Qwt
    参数和返回类型也可以多态
    多态的运行
    调用哪个方法
    继承的意义
    设计继承树2
    设计继承树1
    了解继承
  • 原文地址:https://www.cnblogs.com/wszxx/p/10842724.html
Copyright © 2011-2022 走看看