-2

選択したときに強調表示する (行の色を #DFDFDF に変更する) 機能を HTML ページに追加したいと思います。

別の行が選択されている場合は、行の色を元の色に戻し、新しく選択した行に色を付けます。

上部のヘッダーがクリックされると、色が変化しないようにする必要があることに注意してください。

これがフィドルです：http://jsfiddle.net/q42L2/

あなたのすべての助けに感謝します

<div id="results" class="scrollingdatagrid">

  <table id="mstrTable" cellspacing="0">
     <thead>
      <tr> 
        <th>File Number</th>
        <th>Date1</th>
        <th>Date2</th>
        <th>Status</th>
        <th>Num.</th>
      </tr>
    </thead>
    <tbody>
      <tr> 
        <td>KABC</td>
        <td>09/12/2002</td>
        <td>09/12/2002</td>
        <td>Submitted</td>
        <td>0</td>

      </tr>
      <tr> 
        <td>KCBS</td>
        <td>09/11/2002</td>
        <td>09/11/2002</td>
        <td>Lockdown</td>
        <td>2</td>
      </tr>

      <tr> 
        <td>WFLA</td>
        <td>09/11/2002</td>
        <td>09/11/2002</td>
        <td>Submitted</td>
        <td>1</td>
      </tr>
      <tr> 
        <td>WTSP</td>

        <td>09/15/2002</td>

        <td>09/15/2002</td>
        <td>In-Progress</td>
        <td>10</td>
      </tr>
      <tr> 
        <td>WROC</td>

        <td>10/11/2002</td>

        <td>10/11/2002</td>

        <td>Submitted</td>
        <td>12</td>
      </tr>
      <tr> 
        <td>WPPP</td>
        <td>09/16/2002</td>
        <td>09/16/2002</td>
        <td>In-Progress</td>

        <td>0</td>
      </tr>
      <tr> 
        <td>WRRR</td>
        <td>09/06/2002</td>
        <td>09/06/2002</td>
        <td>Submitted</td>
        <td>5</td>

      </tr>
      <tr> 
        <td>WTTT</td>
        <td>09/21/2002</td>
        <td>09/21/2002</td>
        <td>In-Progress</td>
        <td>0</td>
      </tr>

      <tr> 
        <td>W000</td>
        <td>11/11/2002</td>
        <td>11/11/2002</td>
        <td>Submitted</td>
        <td>7</td>
      </tr>
      <tr> 
        <td>KABC</td>

        <td>10/01/2002</td>

        <td>10/01/2002</td>
        <td>Submitted</td>
        <td>10</td>
      </tr>
      <tr> 
        <td>KCBS</td>

        <td>10/18/2002</td>

        <td>10/18/2002</td>

        <td>Lockdown</td>
        <td>2</td>
      </tr>
      <tr> 
        <td>WFLA</td>
        <td>10/18/2002</td>
        <td>10/18/2002</td>
        <td>Submitted</td>

        <td>1</td>
      </tr>
      <tr> 
        <td>WTSP</td>
        <td>10/19/2002</td>
        <td>10/19/2002</td>
        <td>In-Progress</td>
        <td>0</td>

      </tr>
      <tr> 
        <td>WROC</td>
        <td>07/18/2002</td>
        <td>07/18/2002</td>
        <td>Submitted</td>
        <td>2</td>
      </tr>

      <tr> 
        <td>WPPP</td>
        <td>10/28/2002</td>
        <td>10/28/2002</td>
        <td>In-Progress</td>
        <td>10</td>
      </tr>
      <tr> 
        <td>WRRR</td>

        <td>10/28/2002</td>

        <td>10/28/2002</td>
        <td>Submitted</td>
        <td>5</td>
      </tr>
      <tr> 
        <td>WTTT</td>

        <td>10/08/2002</td>

        <td>10/08/2002</td>

        <td>In-Progress</td>
        <td>0</td>
      </tr>
      <tr> 
        <td>WIL0</td>
        <td>10/18/2001</td>
        <td>10/18/2001</td>
        <td>Submitted</td>

        <td>7</td>
      </tr>
      <tr> 
        <td>KABC</td>
        <td>04/18/2002</td>
        <td>04/18/2002</td>
        <td>Submitted</td>
        <td>0</td>

      </tr>
      <tr> 
        <td>KCBS</td>
        <td>10/05/2001</td>
        <td>10/05/2001</td>
        <td>Lockdown</td>
        <td>2</td>
      </tr>

      <tr> 
        <td>WFLA</td>
        <td>10/18/2002</td>
        <td>10/18/2002</td>
        <td>Submitted</td>
        <td>1</td>
      </tr>
      <tr> 
        <td>WTSP</td>

        <td>10/19/2002</td>

        <td>10/19/2002</td>
        <td>In-Progress</td>
        <td>0</td>
      </tr>
      <tr> 
        <td>WROC</td>

        <td>12/18/2002</td>

        <td>12/18/2002</td>

        <td>Submitted</td>
        <td>2</td>
      </tr>
      <tr> 
        <td>WPPP</td>
        <td>12/28/2002</td>
        <td>12/28/2002</td>
        <td>In-Progress</td>

        <td>8</td>
      </tr>
      <tr> 
        <td>WRRR</td>
        <td>12/20/2002</td>
        <td>12/20/2002</td>
        <td>Submitted</td>
        <td>5</td>

      </tr>
      <tr> 
        <td>WTTT</td>
        <td>12/11/2002</td>
        <td>12/11/2002</td>
        <td>In-Progress</td>
        <td>0</td>
      </tr>

      <tr> 
        <td>W0VB</td>
        <td>01/18/2003</td>
        <td>01/18/2003</td>
        <td>Submitted</td>
        <td>17</td>
      </tr>
      <tr> 
        <td>KABC</td>

        <td>12/17/2002</td>

        <td>12/17/2002</td>
        <td>Submitted</td>
        <td>20</td>
      </tr>
      <tr> 
        <td>KCBS</td>

        <td>12/16/2002</td>

        <td>12/16/2002</td>

        <td>Lockdown</td>
        <td>2</td>
      </tr>
      <tr> 
        <td>WFAA</td>
        <td>12/18/2002</td>
        <td>12/18/2002</td>
        <td>Submitted</td>

        <td>1</td>
      </tr>
      <tr> 
        <td>WTSP</td>
        <td>12/18/2002</td>
        <td>12/18/2002</td>
        <td>In-Progress</td>
        <td>0</td>

      </tr>
      <tr> 
        <td>WROC</td>
        <td>12/19/2002</td>
        <td>12/19/2002</td>
        <td>Submitted</td>
        <td>2</td>
      </tr>

      <tr> 
        <td>WPPP</td>
        <td>12/06/2002</td>
        <td>12/06/2002</td>
        <td>In-Progress</td>
        <td>0</td>
      </tr>
      <tr> 
        <td>WRRR</td>

        <td>12/28/2002</td>

        <td>12/28/2002</td>
        <td>Submitted</td>
        <td>5</td>
      </tr>
      <tr> 
        <td>WTTT</td>

        <td>12/30/2002</td>

        <td>12/30/2002</td>

        <td>In-Progress</td>
        <td>0</td>
      </tr>
      <tr> 
        <td>UMBA</td>
        <td>12/26/2002</td>
        <td>12/26/2002</td>
        <td>Submitted</td>

        <td>7</td>
      </tr>
      <tr> 
        <td>KABC</td>
        <td>12/18/2002</td>
        <td>12/18/2002</td>
        <td>Submitted</td>
        <td>0</td>

      </tr>
      <tr> 
        <td>KCBS</td>
        <td>12/29/2002</td>
        <td>12/29/2002</td>
        <td>Lockdown</td>
        <td>2</td>
      </tr>

      <tr> 
        <td>WFFF</td>
        <td>12/22/2002</td>
        <td>12/22/2002</td>
        <td>Submitted</td>
        <td>1</td>
      </tr>
      <tr> 
        <td>WTSP</td>

        <td>12/18/2001</td>

        <td>12/18/2001</td>
        <td>In-Progress</td>
        <td>9</td>
      </tr>
      <tr> 
        <td>WROC</td>

        <td>11/19/2001</td>

        <td>11/19/2001</td>

        <td>Submitted</td>
        <td>2</td>
      </tr>
      <tr> 
        <td>WPPP</td>
        <td>11/20/2001</td>
        <td>11/20/2001</td>
        <td>In-Progress</td>

        <td>0</td>
      </tr>
      <tr> 
        <td>WRRR</td>
        <td>10/19/2001</td>
        <td>10/19/2001</td>
        <td>Submitted</td>
        <td>5</td>

      </tr>
      <tr> 
        <td>WTTT</td>
        <td>11/29/2001</td>
        <td>11/29/2001</td>
        <td>In-Progress</td>
        <td>8</td>
      </tr>

      <tr> 
        <td>KPLT</td>
        <td>11/19/2001</td>
        <td>11/19/2001</td>
        <td>Submitted</td>
        <td>7</td>
      </tr>
      <tr> 
        <td>KABC</td>

        <td>11/19/2001</td>

        <td>11/19/2001</td>
        <td>Submitted</td>
        <td>13</td>
      </tr>
      <tr> 
        <td>KBRE</td>

        <td>11/19/2001</td>

        <td>11/19/2001</td>

        <td>Lockdown</td>
        <td>2</td>
      </tr>
      <tr> 
        <td>WFLA</td>
        <td>11/19/2001</td>
        <td>11/19/2001</td>
        <td>Submitted</td>

        <td>1</td>
      </tr>
      <tr> 
        <td>WTSP</td>
        <td>02/19/2003</td>
        <td>02/19/2003</td>
        <td>In-Progress</td>
        <td>0</td>

      </tr>
      <tr> 
        <td>WROC</td>
        <td>02/17/2003</td>
        <td>02/17/2003</td>
        <td>Submitted</td>
        <td>2</td>
      </tr>

      <tr> 
        <td>WPPP</td>
        <td>02/16/2003</td>
        <td>02/16/2003</td>
        <td>In-Progress</td>
        <td>16</td>
      </tr>
      <tr> 
        <td>WRRR</td>

        <td>02/29/2003</td>

        <td>02/29/2003</td>
        <td>Submitted</td>
        <td>5</td>
      </tr>
      <tr> 
        <td>WTTT</td>

        <td>03/19/2003</td>

        <td>03/19/2003</td>

        <td>In-Progress</td>
        <td>19</td>
      </tr>
      <tr> 
        <td>KLTR</td>
        <td>02/10/2003</td>
        <td>02/10/2003</td>
        <td>Submitted</td>

        <td>7</td>
      </tr>
      <tr> 
        <td>KABC</td>
        <td>04/05/2003</td>
        <td>04/05/2003</td>
        <td>Submitted</td>
        <td>16</td>

      </tr>
      <tr> 
        <td>KCBS</td>
        <td>02/19/2003</td>
        <td>02/19/2003</td>
        <td>Lockdown</td>
        <td>2</td>
      </tr>

      <tr> 
        <td>WFLA</td>
        <td>02/16/2003</td>
        <td>02/16/2003</td>
        <td>Submitted</td>
        <td>1</td>
      </tr>
      <tr> 
        <td>WTSP</td>

        <td>02/13/2003</td>

        <td>02/13/2003</td>
        <td>In-Progress</td>
        <td>5</td>
      </tr>
      <tr> 
        <td>WROC</td>

        <td>02/14/2003</td>

        <td>02/14/2003</td>

        <td>Submitted</td>
        <td>2</td>
      </tr>
      <tr> 
        <td>WPPP</td>
        <td>03/19/2003</td>
        <td>03/19/2003</td>
        <td>In-Progress</td>

        <td>0</td>
      </tr>
      <tr> 
        <td>WRRR</td>
        <td>02/19/2002</td>
        <td>02/19/2002</td>
        <td>Submitted</td>
        <td>5</td>

      </tr>
      <tr> 
        <td>WTTT</td>
        <td>02/19/2002</td>
        <td>02/19/2002</td>
        <td>In-Progress</td>
        <td>0</td>
      </tr>

      <tr> 
        <td>WYYD</td>
        <td>02/11/2002</td>
        <td>02/11/2002</td>
        <td>Submitted</td>
        <td>7</td>
      </tr>
      <tr> 
        <td>KABC</td>

        <td>02/19/2002</td>

        <td>02/19/2002</td>
        <td>Submitted</td>
        <td>11</td>
      </tr>
      <tr> 
        <td>KCBS</td>

        <td>02/19/2002</td>

        <td>02/19/2002</td>

        <td>Lockdown</td>
        <td>12</td>
      </tr>
      <tr> 
        <td>WFLA</td>
        <td>05/19/2002</td>
        <td>05/19/2002</td>
        <td>Submitted</td>

        <td>1</td>
      </tr>
      <tr> 
        <td>WTSP</td>
        <td>02/20/2002</td>
        <td>02/20/2002</td>
        <td>In-Progress</td>
        <td>0</td>

      </tr>
      <tr> 
        <td>WROC</td>
        <td>05/20/2002</td>
        <td>05/20/2002</td>
        <td>Submitted</td>
        <td>2</td>
      </tr>

      <tr> 
        <td>WPPP</td>
        <td>02/19/2003</td>
        <td>02/19/2003</td>
        <td>In-Progress</td>
        <td>13</td>
      </tr>
      <tr> 
        <td>WRRR</td>

        <td>02/19/2002</td>

        <td>02/19/2002</td>
        <td>Submitted</td>
        <td>5</td>
      </tr>

    </tbody>
  </table>

</div>
4

3 に答える 3

0

これで始めてみてください（未テスト）。正しい方向に向ける必要があります。必要なのは、テーブルを遅延させるか、onload 関数から initSelectableTable を呼び出して作成した後にこれを含めることだけです。テーブルのIDを「SelectableTable」に設定してください。

var OldColour = "";
var SelectedRow = null;
var SelectedColour = "#DFDFDF";

initSelectableTable("SelectableTable");

function onCellClicked(cell) {
    if (cell.parentNode) {
        if (SelectedRow) SelectedRow.style.backgroundColor = OldColour;
        SelectedRow = cell.parentNode;
        OldColour = SelectedRow.style.backgroundColor;
        SelectedRow.style.backgroundColor = SelectedColour;     
    }
}

function initSelectableTable(tableid) {
    var elTable = document.getElementById(tableid);
    if (elTable) {
        var cells = elTable.getElementsByTagName("td");
        for (var i = 0; i < cells.length; i++) {
            cells[i].onclick = function () { onCellClicked(this); }
        }
    }
}

それが役に立てば幸い...

于 2013-01-09T17:26:06.353 に答える
0 
$('tbody tr').bind('click', function (evn){
  $('tbody tr').css('background-color', 'white');
    $(this).css('background-color', 'red');
  });

http://jsfiddle.net/raghu2314/RCEKW/1/

これで問題は解決します。正常に動作することをテストしました

于 2013-01-09T17:55:41.590 に答える
-2

次のコード（Jquery）で簡単に実行できます

$(document).ready(function () {       
  $('#mstrTable tr').not('thead tr').click(function () {
    $('#mstrTable tr').css('background-color', 'white');
    $(this).css('background-color', '#DFDFDF');             
  }); 
});

デモ

編集

theadを使用して選択から除外しNotます。

于 2013-01-09T17:27:57.597 に答える