如何根据数据显示不同颜色的整个表格tr
我在使用Jquery tableSorter的表中显示Stock Symbols。
我的要求是，如果收盘价大于昨天收盘价
我想用绿色显示整个tr行
要不然
以红色显示整个tr行
类似于这个小提琴中所示（用于绿色显示的目的）
http://jsfiddle.net/cmhmb34j/2/
这是我的代码
var resp = [{
"prevclose_val": "1214.95",
"low_val": "1216.05",
"high_value": "1253.50",
"open_value": "1220.10",
"symbol_name": "ACC",
"curr_day": "2016-01-29",
"close_val": "1240.05"
}, {
"prevclose_val": "193.20",
"low_val": "193.00",
"high_value": "196.50",
"open_value": "193.95",
"symbol_name": "AMBUJACEM",
"curr_day": "2016-01-29",
"close_val": "195.35"
}];
(function($) {
var dialog = $("#popup-dialog").dialog({
autoOpen: false,
open: function(event, ui) {
// Will fire when this popup is opened
// jQuery UI Dialog widget
$('#table0').tablesorter({
theme: 'blue',
headerTemplate: '{content} {icon}', // Add icon for various themes
widgets: ['zebra', 'filter', 'stickyHeaders'],
widgetOptions: {
// jQuery selector or object to attach sticky header to
stickyHeaders_attachTo: '#popup',
stickyHeaders_offset: 0,
stickyHeaders_addCaption: true
}
});
}
});
$('.combobox').on('click', '.txt-btn', function() {
$txtboxBtn = $(this);
$comboboxOptions = $txtboxBtn.parent().next();
$comboboxOptions.slideToggle();
});
$('.combobox-options').on('click', 'li', function() {
var html = "";
for (var i = 0; i < resp.length; i++) {
var class_toadd = '';
var prevclose_val = resp[i].prevclose_val;
var low_val = resp[i].low_val;
var high_value = resp[i].high_value;
var open_value = resp[i].open_value;
var symbol_name = resp[i].symbol_name;
var curr_day = resp[i].curr_day;
var close_val = resp[i].close_val;
if (parseFloat(close_val > prevclose_val)) {
class_toadd = "greenclass";
} else if (parseFloat(close_val < prevclose_val)) {
class_toadd = "redclass";
}
html += "<tr> <td>" + symbol_name + "</td><td>" + open_value + '</td> <td class="">' + high_value + '</td> <td class="">' + low_val + '</td> <td class="' + class_toadd + '">' + close_val + '</td> <td class="">' + prevclose_val + '</td> <td class="">' + curr_day + "</td></tr>"
}
var tabid = "table0";
$("#" + tabid + " tbody").html(html);
$("#table0").trigger("update");
dialog.dialog("open");
});
})(jQuery);
这是我的小提琴
您能否让我知道如何根据动态数据以红色或绿色显示它？
你的情况有问题，所以这个类不会被分配给class_toadd变量，你应该替换：
if (parseFloat(close_val > prevclose_val)) {
class_toadd = "greenclass";
} else if (parseFloat(close_val < prevclose_val)) {
class_toadd = "redclass";
}
借：
if (parseFloat(close_val) > parseFloat(prevclose_val)) {
class_toadd = "greenclass";
} else if (parseFloat(close_val) < parseFloat(prevclose_val)) {
class_toadd = "redclass";
}
希望这可以帮助。
var resp = [{
"prevclose_val": "1214.95",
"low_val": "1216.05",
"high_value": "1253.50",
"open_value": "1220.10",
"symbol_name": "ACC",
"curr_day": "2016-01-29",
"close_val": "1240.05"
}, {
"prevclose_val": "193.20",
"low_val": "193.00",
"high_value": "196.50",
"open_value": "193.95",
"symbol_name": "AMBUJACEM",
"curr_day": "2016-01-29",
"close_val": "195.35"
}];
(function($) {
var dialog = $("#popup-dialog").dialog({
autoOpen: false,
open: function(event, ui) {
// Will fire when this popup is opened
// jQuery UI Dialog widget
$('#table0').tablesorter({
theme: 'blue',
headerTemplate: '{content} {icon}', // Add icon for various themes
widgets: ['zebra', 'filter', 'stickyHeaders'],
widgetOptions: {
// jQuery selector or object to attach sticky header to
stickyHeaders_attachTo: '#popup',
stickyHeaders_offset: 0,
stickyHeaders_addCaption: true
}
});
}
});
$('.combobox').on('click', '.txt-btn', function() {
$txtboxBtn = $(this);
$comboboxOptions = $txtboxBtn.parent().next();
$comboboxOptions.slideToggle();
});
$('.combobox-options').on('click', 'li', function() {
var html = "";
for (var i = 0; i < resp.length; i++) {
var class_toadd = '';
var prevclose_val = resp[i].prevclose_val;
var low_val = resp[i].low_val;
var high_value = resp[i].high_value;
var open_value = resp[i].open_value;
var symbol_name = resp[i].symbol_name;
var curr_day = resp[i].curr_day;
var close_val = resp[i].close_val;
if (parseFloat(close_val) > parseFloat(prevclose_val)) {
class_toadd = "greenclass";
} else if (parseFloat(close_val) < parseFloat(prevclose_val)) {
class_toadd = "redclass";
}
html += "<tr> <td>" + symbol_name + "</td><td>" + open_value + '</td> <td class="">' + high_value + '</td> <td class="">' + low_val + '</td> <td class="' + class_toadd + '">' + close_val + '</td> <td class="">' + prevclose_val + '</td> <td class="">' + curr_day + "</td></tr>"
}
var tabid = "table0";
$("#" + tabid + " tbody").html(html);
$("#table0").trigger("update");
dialog.dialog("open");
});
})(jQuery);#popup-dialog {
display: none;
}
@import url(http://fonts.googleapis.com/css?family=Montserrat);
html, input, textarea, a {
font-family: 'Helvetica', 'Montserrat';
}
input[type=text].txtbox {
color: #000000;
height: 60px;
width: 260px;
font-size: 18px;
border: 1px solid #f0f0f0;
padding-left: 21px;
outline: none;
}
.txt-btn {
width: 60px;
height: 60px;
border: none;
text-decoration: none;
text-align: center;
line-height: 60px;
color: white;
display: inline-block;
text-indent: -999999px;
}
.txt-btn:before {
content: "";
position: absolute;
left: 20%;
top: 1.3em;
width: 2em;
height: 0.2em;
box-shadow:
0 0.45em 0 0 white,
0 0.90em 0 0 white;
}
.combobox {
position: relative;
width: 320px;
height: 60px;
}
.combobox input[type=text].txtbox, .combobox .txt-btn {
position: absolute;
}
.combobox .txt-btn {
right: 0;
}
.combobox + .combobox-options {
width: 320px;
position: absolute;
background: #1f7f5c;
color: #ffffff;
}
.combobox + .combobox-options li {
height: 50px;
padding: 12px;
border-bottom: 1px solid #2a8664;
line-height: 50px;
cursor: pointer;
}
.greenclass
{
color:#080!important;
font-weight:bold
}
.redclass
{
color:#c00!important;
font-weight:bold
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
<div class="combobox">
<input class="txtbox" type="text" placeholder="" />
<a href="#" class="txt-btn">Select</a>
</div>
<ul class="combobox-options">
<li>Click Here For Symbols List</li>
</ul>
<div id="popup-dialog">
<table id="table0" class="tablesorter">
<!-- <caption>Student Grades</caption>-->
<thead>
<tr>
<th>Name</th>
<th>Open</th>
<th>High</th>
<th>Low</th>
<th>Close</th>
<th>Prev. Close</th>
<th class="sorter-false">Day</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Open</th>
<th>High</th>
<th>Low</th>
<th>Close</th>
<th>Prev. Close</th>
<th>Day</th>
<th class="sorter-false">Day</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
</div> 你可以使用jQuery.filter来达到这个目的：
$("yourTable tr").filter(function(index) {
return someTest($(this));
}).css("background-color", "yourColor");
查看此页面以获取更多信息。
链接地址: http://www.djcxy.com/p/31031.html上一篇: How to display entire table tr in different color based on data
下一篇: Change the color of progress bar dynamically using jQuery