0

我有一个如下概述的 HTML 表格（带有示例数据）：

<table class="tbl">
  <caption>Version History Table</caption>

  <thead>   
    <tr>
      <th>Change Date</th>
      <th>Change Type</th>
      <th>Description</th>
      <th>StaffID</th>
    </tr>   
  </thead>

  <tbody>
    <tr>
      <td>16/04/2010 07:30</td>
      <td>Edit</td>
      <td>New role</td>
      <td>00215</td>
    </tr>
    <tr>
      <td>15/02/2012 14:37</td>
      <td>Edit</td>
      <td>Out of stock</td>
      <td>85487</td>
    </tr>
    <tr>
      <td>14/03/2013 10:18</td>
      <td>Add</td>
      <td>Out of date</td>
      <td>15748</td>
    </tr>              
  </tbody>

</table>

我想要实现的是，当用户选择一行时，会出现一个弹出/对话框，显示历史的详细信息。

4

4 回答 4

9

用一点 jQuery

$(document).ready(function(){
    $('table tbody tr').click(function(){
        alert($(this).text());
    });
});

还有一些CSS...

table tbody tr:hover {
    background-color: orange;
    cursor: pointer;
}

你可以完成你的要求

试试这个jsFiddle

于 2013-04-16T16:14:38.837 回答
1

尝试这个

$('tr', 'table.tbl tbody').click(function(){
    alert($(this).text());
});

编辑：-根据您的评论，您不需要在所有 trs 中都添加 onClick。您可以使用 Jquery 选择器将点击事件分配给您的所有 trs

使用您的 showDialog 方法，您可以执行此操作，并且在 showDIalog 中，这将被单击tr。

$('tr', 'table.tbl tbody').click(showDialog);
于 2013-04-16T16:09:30.917 回答
0

下面的代码将显示问题中提到的详细信息。

附上快照

<script>
    $(document).ready(function () {
      $('.tbl tbody tr').click(function () {
        var details = '';
        details += 'Change Date : ' + $(this).find('td:first-child').html() + '\n';
        details += 'Change Type : ' + $(this).find('td:nth-child(2)').html() + '\n';
        details += 'Description : ' + $(this).find('td:nth-child(3)').html() + '\n';
        details += 'StaffID : ' + $(this).find('td:nth-child(4)').html() + '\n';
            alert(details);
      });
    });
  </script>
于 2020-01-17T17:20:22.443 回答
0

例如，如果您使用诸如p之类的标记或其他标记来识别作为上下文键的列

    <table class="tbl">
    <caption>Version History Table</caption>

    <thead>   
        <tr>
        <th>Change Date</th>
        <th>Change Type</th>
        <th>Description</th>
        <th>StaffID</th>
        </tr>   
    </thead>

    <tbody>
        <tr>
        <td>16/04/2010 07:30</td>
        <td>Edit</td>
        <td>New role</td>
        <td><p>00215</p></td>
        </tr>
        <tr>
        <td>15/02/2012 14:37</td>
        <td>Edit</td>
        <td>Out of stock</td>
        <td><p>85487</p></td>
        </tr>
        <tr>
        <td>14/03/2013 10:18</td>
        <td>Add</td>
        <td>Out of date</td>
        <td><p>15748</p></td>
        </tr>              
    </tbody>
    </table>
    <p>Picked row:</p>
    <p id="linea"></p>
    <p>The key for the row picked (StaffID) was:</p>
    <p id="StaffID"></p>

您也可以使用此脚本提取所选行的键：

$(document).ready(function(){
    $('table tbody tr').click(function(){
        $("#linea").text($(this).text())
        $("#StaffID").text($(this).children('td').children('p').text())
    });
});
于 2020-01-17T16:12:39.493 回答