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

make an expandable table view cell through first column

本文关键字：可展开 单元格 表格 一个 视图 一列 创建      更新时间：2023-09-26

我有一个包含多行的表，用户可以在其中单击行的任意宽度，它会展开以提供额外的信息。下面是一个工作示例

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");
    });
});

我试图修改这个表一点，我想，当用户单击在第一列的任何值(在这种情况下，用户单击第一个标题或第二个标题)，然后只有视图为那一行应该展开。当前视图可以在行的任何位置展开。谁能告诉我怎么做呢

如果您只想成为可单击的第一列，请将事件附加到每行的第一个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>

$(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>

相关文章：