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('查看')
        }
      })
  • 相关阅读:
    解构赋值好处
    react中给state赋予初始值(使用dva)
    popover/ToolTip设置在root标签外面,如何设置样式-antd
    判断对象为空的情况
    HTML、XHTML、XML和HTML5之间的联系与区别
    innerHTML、innerText、outerHTML和value的区别
    JS面向对象经典题目(一)
    js中apply、call和bind的区别
    react的TodoList增删改
    JS原生addClass、removeClass实现
  • 原文地址:https://www.cnblogs.com/wszxx/p/10842724.html
Copyright © 2011-2022 走看看