Question

我的网站上有几个HTML表格，我在灰色和白色之间进行了划分。现在我试图让所选行突出显示为深灰色。我已经尝试了一些最有希望的东西，我已经把它放进了小提琴here。

表：

myClass

jquery的：

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

的CSS：

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

我想也许我不包括正确的jquery？以下是我尝试将其付诸实践的内容：

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

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

Answer 1

script中的指定ID不是表格的id
为什么在tbody之后关闭</tr>？在这种情况下，tr元素将没有sibling
包含jQuery库

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: