-2

我想在我的 html 页面中添加功能以在选中时突出显示（将行颜色更改为 #DFDFDF）。

如果选择了另一行，则将行颜色返回到其初始颜色并为新选择的行着色。

请注意，当单击顶部标题时，id 喜欢使其免于改变颜色。

这是小提琴：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 回答