通過第一列

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>