單擊時突出顯示一行

-2

我想在我的html頁面添加功能以突出顯示（將行顏色更改爲#DFDFDF）。單擊時突出顯示一行

如果選擇了另一行，則將行顏色返回到其初始顏色併爲新選擇的行着色。

請注意，當頂部標題被點擊時，id喜歡免除不斷變化的顏色。

很多感謝和讚賞所有的幫助

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

來源

2013-01-09 user1959234

你有沒有真正嘗試任何東西，你只是想找人做的工作給你免費的嗎？ – j08691

是不是什麼stackoverflow？免費編程換取互聯網點？ –

'internet points'lol –

嘗試用這種（未經測試）開始。它應該指向正確的方向，所有你需要做的就是在創建表之後通過推遲它或通過從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-09 17:26:06 tunerscafe

看起來很有前途，但「parentNode」爲null或不是對象（function onCellClicked（cell） – user1959234

讓我把它粘貼在一個頁面上並測試它，我想你可能必須先定義cells [i]傳遞給onCellClicked – tunerscafe

@tunerscafe這是相當昂貴的，差不多300個事件處理程序和匿名函數... :-(。 – Teemu

-2

你可以簡單地做，通過下面的代碼（jQuery的）

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

DEMO

編輯

排除thead通過使用Not進行選擇。

來源

2013-01-09 17:27:57

@authorOfThisQuestion「'id喜歡免除不斷變化的顏色。」這條線讓我感到困惑。無論是身份證還是我會。？ –

$('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-09 17:55:41 Raghuveer

單擊時突出顯示一行

回答

相關問題