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('查看')
        }
      })
  • 相关阅读:
    对获取的DataTable表进行过滤筛选得到DataView
    简单提取iOS13的ipsw固件的内置壁纸(或文件)
    win10设置Python程序定时运行(设置计划任务)
    后端返回一个这种类型的时间格式给前端2020-01-16T09:10:02.349Z
    js把每个词的首字母转大写
    idea连接mysql自动生成实体类
    el自定义函数
    js日期时间格式化
    js大小写转换
    js瞄点
  • 原文地址:https://www.cnblogs.com/wszxx/p/10842724.html
Copyright © 2011-2022 走看看