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

Question

我的网站中有几个 HTML 表格，我在灰色和白色之间进行了划分。现在我试图让选定的行突出显示为深灰色。我已经尝试了几种最有前途的东西，我已经把它放在了 fiddle 中 here .

表格:

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

j查询:

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

我想也许我没有包括正确的 jquery？以下是我试图让它发挥作用的内容:

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

我以前从未在 php 中使用过 jquery，到目前为止我只用 php 完成了所有事情。

Answer 1

• 在script中指定ID不是 id table 的
• 你为什么关闭 tbody在 </tr> 之后？在那种情况下 tr元素将没有 sibling
• 包括jQuery图书馆

$("#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>