[英]Highlight the selected row in html table with php
我的网站上有几个HTML表格,这些表格在灰色和白色之间划分。 现在,我试图将选中的行突出显示为深灰色。 我尝试了几件最有前途的东西,我在这里摆弄了一些 。
表:
<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;
}
我认为也许我没有包括正确的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就完成了所有工作。
script
指定的ID不是表的id
</tr>
之后关闭tbody
? 在这种情况下, 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.