如何使用JavaScript根据内容更改表格行颜色
[英]How to change Table row colour based on content using Javascript
问题描述
我想用来自php请求的内容填充表格。 根据内容，我具有4种状态，我想使用它们来定义bootstrap TR类。
以下是我的摘录。 我已经将类分配给TR，但是可能必须更改。
该规则应该已经在下面的代码段的TR类中显示了。
条件如下：
预期=成功
已取消=危险危险
内部= bg-info
部分= bg警告
已完成=有效
我想用php foreach或同时使用php来填充表格，如何使用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>
4 个解决方案
解决方案1
1 2017-02-25 17:52:33
希望这能给您一些见识...
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;
}
});
});
解决方案2
1 2017-02-25 18:10:57
如果问题是引导程序类无法正常工作，那么……我的答案就是解决您的问题。
您尚未在HTML页面中包含引导CSS文件，或者这样做时出错了。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
这是您应该在<head></head>标记中包括的行。
这是演示： DEMO为您编写代码
仔细观察，我没有更改您的代码中的任何内容。
PS：如果这不是解决方案，那么我将无法理解您的问题。
解决方案3
0 2017-02-25 18:01:57
您可以使用jQuery遍历status列，并根据文本设置background-color ：
var colors = { Expected: '#90EE90', Inhouse: '#ADD8E6', Cancelled: '#FF0000', Partial: '#FFA500' }; $('tr td:nth-child(4)').each(function() { $this = $(this); $this.parent().css('background-color', colors[$this.text()]); });
#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; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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 class="bg-warning"> <td>Koniglich Essen</td> <td>9876</td> <td>253</td> <td>Partial</td> </tr> </table>
解决方案4
0 已采纳 2017-02-25 18:04:01
这是我的答案的工作示例...
jQuery(document).ready(function($) { $('#reservationTable tr').each(function () { var td_value = $('td',this).eq(3).text(); console.log(td_value); switch (td_value) { case 'Expected': $(this).addClass('bg-success'); break; 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"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <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=""> <td>Alfreds Futterkiste</td> <td>49222</td> <td>201</td> <td>Expected</td> </tr> <tr class=""> <td>Berglunds snabbkop</td> <td>12846</td> <td>300</td> <td>Inhouse</td> </tr> <tr class=""> <td>Island Trading</td> <td>11847</td> <td>234</td> <td>Cancelled</td> </tr> <tr class=""> <td>Koniglich Essen</td> <td>9876</td> <td>253</td> <td>Partial</td> </tr> </table>
如何使用 javascript 相对于输入表数据更改表中行的颜色？
[英]How can I use javascript to change the colour of a row in a table relative to input into table data?
HTML / CSS / JavaScript：如何根据数据更改表格行的颜色
[英]HTML/CSS/JavaScript: How to change color of table row based on data
如何根据列Rshiny中的条件更改数据表行背景颜色
[英]How to change Datatable row background colour based on the condition in a column, Rshiny
如何使用 JavaScript 将一行中某个单元格的内容编辑到表格中？
[英]How to edit content of certain cell in a row into a table using JavaScript?
如何使用javascript将隐藏的div标签的内容推到表行？
[英]How to push content of a hidden div tag to a table row using javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.