使用php突出显示html表中的选定行

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>

</div>