通过第一列创建一个可扩展的表格视图单元格答案

【问题标题】：make an expandable table view cell through first column通过第一列创建一个可扩展的表格视图单元格
【发布时间】：2015-12-19 07:07:43
【问题描述】：

我有一个包含多行的表格，用户可以在其中单击任意宽度的行，它会被展开以提供额外信息。这是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");
    });
});

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

【问题讨论】：

你的意思是，只有第一列应该是可点击的？
@Hüseyin BABAL 是的，对于可展开视图，只有第一列应该是可点击的

标签： javascript jquery html ajax html-table

【解决方案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>

【讨论】：

这行不通。 $(this).next("tr") 是问题所在。

【解决方案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>

【讨论】：