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>

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

2 个答案: