Question

我有一个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>

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

Answer 1

使用一点点jQuery

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

还有一些CSS ......

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

您可以完成您的要求

试试这个jsFiddle

Answer 2

试试这个

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

编辑： - 根据你的评论，你不需要在所有的时间点上点击。您可以使用Jquery选择器将click事件分配给所有trs

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

$('tr', 'table.tbl tbody').click(showDialog);

Answer 3

例如，如果您使用诸如 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())
    });
});

Answer 4

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

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

使用jQuery从表中选择行

4 个答案: