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 に答える