Highlight the selected row in html table with php

Question

I have several HTML tables in my website that I have banded between gray and white. Now I'm trying to get the selected row to be highlighted a darker gray. I've tried several things the most promising of which I've put into a fiddle here .

Table:

<table class="tab" id="BuildTable">
  <tr>
    <th class="cell">Id</th>
    <th class="cell">State</th>
    <th class="cell">ProjectNumber</th>
    <th class="cell">SchedulerComments</th>
  </tr>
  <tbody>
    <tr class="row1">
      <td>37766</td>
      <td></td>
      <td>133-20107-16253-2363856-1</td>
      <td>02/01/2016 ska096admin: PROJECT COMPLETE 1/29/16 PER DANA OEHLERICH; 12/10/2015 dlb223: There is no material in IMT
      to track, but there is on the EWOP; 12/03/2015 ska096: 12/3/15 RELEASED PROJECT TO FIELD</td>
    </tr>
  </tbody>
  <tbody>
    <tr class="row">
      <td>37767</td>
      <td></td>
      <td>133-20107-66413-2379926-1</td>
      <td>04/08/2016 ska096: INSTALL COMPLETE PER DANA OEHLERICH - OK TO CLOSE; 03/15/2016 dlb223: 3/15 dlb Blanket project -
      seq #1; 03/03/2016 ska096: RELEASED PROJECT TO FIELD</td>
    </tr>
  </tbody>
  </table>

jquery:

<script type='text/javascript'> 
$("#BuildTable tr").click(function ()
        { $(this).addClass('selected').siblings().removeClass('selected');
        });
</script>

css:

#BuildTable {
    border-collapse: collapse; 
    text-align: center; 
    width: 100%;
}

#BuildTable tr:hover{
    background-color: rgba(0,0,0,0.4);
}

.row1 {background-color: #fff}
.row {background-color: #e5e5e5}
tr {cursor: pointer}
th {
  background-color: #000;
  color: #fff;
  border: 1px solid #fff !important;
  cursor: default;
}

tbody {overflow-y: scroll}

td, th {padding: 5px;
        border:  1px solid black;
        white-space: nowrap; 
        vertical-align: text-top; 
        overflow-x: auto;
        max-width: 250px; 
        max-height: 25px;
}

.selected {
    background-color: rgba(0,0,0,0.4) !important;
    color: #fff !important;
}

I think maybe I'm not including the right jquery? Here's what I've included trying to get this to work:

    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
    <script type="text/javascript" src="/js/lib/dummy.js"></script>

I've never used jquery in php before, I've done everything so far with just php.

Answer 1

• Specified ID in the script is not the id of the table
• Why are you closing tbody after </tr> ? In that case tr element will have no sibling
• Include jQuery library

 $("#UpdateTable tr").click(function() { $(this).addClass('selected').siblings().removeClass('selected'); }); 

 #UpdateTable { border-collapse: collapse; text-align: center; width: 100%; } #UpdateTable tr:hover { background-color: rgba(0, 0, 0, 0.4); } .row1 { background-color: #fff } .row { background-color: #e5e5e5 } tr { cursor: pointer } th { background-color: #000; color: #fff; border: 1px solid #fff !important; cursor: default; } tbody { overflow-y: scroll } td, th { padding: 5px; border: 1px solid black; white-space: nowrap; vertical-align: text-top; overflow-x: auto; max-width: 250px; max-height: 25px; } .selected { background-color: rgba(0, 0, 0, 0.4) !important; color: #fff !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <table class="tab" id="UpdateTable"> <tr> <th class="cell">Id</th> <th class="cell">State</th> <th class="cell">ProjectNumber</th> <th class="cell">SchedulerComments</th> </tr> <tbody> <tr class="row1"> <td>37766</td> <td></td> <td>133-20107-16253-2363856-1</td> <td>02/01/2016 ska096admin: PROJECT COMPLETE 1/29/16 PER DANA OEHLERICH; 12/10/2015 dlb223: There is no material in IMT to track, but there is on the EWOP; 12/03/2015 ska096: 12/3/15 RELEASED PROJECT TO FIELD</td> </tr> <tr class="row"> <td>37767</td> <td></td> <td>133-20107-66413-2379926-1</td> <td>04/08/2016 ska096: INSTALL COMPLETE PER DANA OEHLERICH - OK TO CLOSE; 03/15/2016 dlb223: 3/15 dlb Blanket project - seq #1; 03/03/2016 ska096: RELEASED PROJECT TO FIELD</td> </tr> </tbody> </table>