通过第一列

Question

使可扩展表格视图单元格我有多个行，其中用户可以点击该行的任何宽度的表，它就会膨胀，得到额外的信息。这里是一个working sample

HTML表的代码

<table id="report" border="1" style="width:100%" > 
    <tr> 
     <th> First </th> 
     <th> Second </th> 
     <th> Third </th> 
    </tr> 

    <tr> 
     <td>1st title</td> 
     <td>1</td> 
     <td>1</td> 
    </tr> 
    <tr> 
     <td colspan="10"> 
      dummy text 1<br> 
      dummy text 1<br> 
      dummy text 1<br> 
     </td> 
    </tr> 

    <tr> 
     <td>2nd title</td> 
     <td>2</td> 
     <td>2</td> 
    </tr> 
    <tr> 
     <td colspan="10"> 
      dummy text 2 <br> 
      dummy text 2<br> 
      dummy text 2<br> 
     </td> 
    </tr>   

</table> 

脚本代码

$(document).ready(function(){ 
    $("#report tbody tr:odd").addClass("odd"); 
    $("#report tbody tr:not(.odd)").hide(); 
    $("#report tbody tr:first-child").show(); 

    $("#report tbody tr.odd").click(function(){ 
     $(this).next("tr").toggle(); 
     $(this).find(".arrow").toggleClass("up"); 
    }); 
}); 

我试图修改此表一点，我想，当用户点击第一列的任何值（在这种情况下，用户点击第一个标题或第二个标题），那么只有该行的视图应该展开。目前，该视图会在该行的任何位置展开。谁能告诉我怎么做

Answer 1

如果你想成为唯一的第一列是点击，附上事件的每一行的第一td：

$(document).ready(function(){ 
 
     $("#report tbody tr:odd").addClass("odd"); 
 
     $("#report tbody tr:not(.odd)").hide(); 
 
     $("#report tbody tr:first-child").show(); 
 

 
     $("#report tbody tr.odd td:first-child").click(function(){ 
 
      $(this).parent().next("tr").toggle(); 
 
      $(this).find(".arrow").toggleClass("up"); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<table id="report" border="1" style="width:100%" > 
 
    <tr> 
 
     <th> First </th> 
 
     <th> Second </th> 
 
     <th> Third </th> 
 
    </tr> 
 

 
    <tr> 
 
     <td>1st title</td> 
 
     <td>1</td> 
 
     <td>1</td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="10"> 
 
      dummy text 1<br> 
 
      dummy text 1<br> 
 
      dummy text 1<br> 
 
     </td> 
 
    </tr> 
 

 
    <tr> 
 
     <td>2nd title</td> 
 
     <td>2</td> 
 
     <td>2</td> 
 
    </tr> 
 
    <tr> 
 
     <td colspan="10"> 
 
      dummy text 2 <br> 
 
      dummy text 2<br> 
 
      dummy text 2<br> 
 
     </td> 
 
    </tr>   
 

 
</table>

Answer 2

$(document).ready(function() { 
 
    $("#report tbody tr:odd").addClass("odd"); 
 
    $("#report tbody tr:not(.odd)").hide(); 
 
    $("#report tbody tr:first-child").show(); 
 

 
    $("#report tbody tr.odd").each(function() { 
 
    $(this).find('td:first').click(function() { 
 
     $(this).closest('tr').next("tr").toggle(); 
 
     $(this).closest('tr').find(".arrow").toggleClass("up"); 
 
    }); 
 
    }); 
 
    //$("#report").jExpand(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<table id="report" border="1" style="width:100%"> 
 
    <tr> 
 
    <th>First</th> 
 
    <th>Second</th> 
 
    <th>Third</th> 
 
    </tr> 
 
    <tr> 
 
    <td>1st title</td> 
 
    <td>1</td> 
 
    <td>1</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="10">dummy text 1 
 
     <br>dummy text 1 
 
     <br>dummy text 1 
 
     <br> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td>2nd title</td> 
 
    <td>2</td> 
 
    <td>2</td> 
 
    </tr> 
 
    <tr> 
 
    <td colspan="10">dummy text 2 
 
     <br>dummy text 2 
 
     <br>dummy text 2 
 
     <br> 
 
    </td> 
 
    </tr> 
 
</table>