效果图:
html:
<table> <tr> <th style="width:130px;">类型</th> <th style="width:138px;">测试</th> <th style="width:90px;">途径</th> <th style="width:100px;">数据</th> <th>剂量</th> <th style="width: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('查看') } })