0
我想填充表格，內容來自PHP請求。根據我有4個狀態我想用來定義引導TR類的內容。如何使用Javascript基於內容更改表格行顏色
下面是我的代碼片段。我已經將課程分配給了TR，但這可能需要更改。
規則應該已經顯示在下面的代碼片段的TR類中。
的條件如下：
預期= BG-成功
取消= BG-危險
點播= BG-信息
偏= bg-warning
成品= BG-活躍
正弦我想使用PHP的foreach或在填寫該表，我怎樣才能使使用JavaScript或jQuery的行動態的表變色？
function reservationListFunction() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("reservationListInput");
filter = input.value.toUpperCase();
table = document.getElementById("reservationTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
jQuery(document).ready(function($) {
$('#reservationTable tr').each(function() {
var td_value = $('td',this).eq(3).text();
switch (td_value) {
case 'Partial':
$(this).addClass('bg-warning');
break;
....
And So On
....
default:
// statements_def
break;
}
});
});#reservationListInput {
background-image: url('./assets/fonts/searchicon.png');
/* Add a search icon to input */
background-position: 10px 12px;
/* Position the search icon */
background-repeat: no-repeat;
/* Do not repeat the icon image */
width: 100%;
/* Full-width */
font-size: 16px;
/* Increase font-size */
padding: 12px 20px 12px 40px;
/* Add some padding */
border: 1px solid #ddd;
/* Add a grey border */
margin-bottom: 12px;
/* Add some space below the input */
}
#reservationTable {
border-collapse: collapse;
/* Collapse borders */
width: 100%;
/* Full-width */
border: 1px solid #ddd;
/* Add a grey border */
font-size: 18px;
/* Increase font-size */
}
#reservationTable th,
#reservationTable td {
text-align: left;
/* Left-align text */
padding: 12px;
/* Add padding */
}
#reservationTable tr {
/* Add a bottom border to all table rows */
border-bottom: 1px solid #ddd;
}
#reservationTable tr.header,
#reservationTable tr:hover {
/* Add a grey background color to the table header and on hover */
background-color: #f1f1f1;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<input class="form-control" type="text" id="reservationListInput" onkeyup="reservationListFunction()" placeholder="Search for reservation..">
<table id="reservationTable">
<tr class="header">
<th style="width:40%;">Name</th>
<th style="width:20%;">Cabin</th>
<th style="width:20%;">Table</th>
<th style="width:20%;">Status</th>
</tr>
<tr class="bg-success">
<td>Alfreds Futterkiste</td>
<td>49222</td>
<td>201</td>
<td>Expected</td>
</tr>
<tr class="bg-info">
<td>Berglunds snabbkop</td>
<td>12846</td>
<td>300</td>
<td>Inhouse</td>
</tr>
<tr class="bg-danger">
<td>Island Trading</td>
<td>11847</td>
<td>234</td>
<td>Cancelled</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>9876</td>
<td>253</td>
<td>Partial</td>
</tr>
</table>
我不知道我理解你的問題。您的PHP是否提供HTML片段？行顏色的條件是什麼？ –
使用CSS選擇器來提供動態顏色 –
基於''''tr'已經有？ –