javascript - 通过第一列制作可扩展的表格 View 单元格

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

我正在尝试稍微修改此表，我希望当用户单击第一列中的任何值时(在本例中用户单击第一个标题或第二个标题)，然后只有该行的 View 应该展开。目前， View 会在行的任何位置展开。谁能告诉我怎么做

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>