Question

我正在使用Jquery tableSorter在表格中显示Stock符号。

我的要求是，如果收盘价高于昨天收盘价

我想以绿色

显示整个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);

这是my fiddle

请您告诉我如何根据动态数据显示红色或绿色？

Answer 1

您的情况有问题，因此课程不会分配到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>

如果要根据变量class_toadd显示整个tr行的颜色，可以将该类分配给tr in：

html += "<tr class="+class_toadd+"> <td>" + symbol_name + "</td><td>" ...

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 class="+class_toadd+"> <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>

如果要显示整个tr行背景，则应为此创建另一个类，并将其分配给条件中的另一个变量，并将变量传递给tr类，例如：

.bg-red-class
{
     background-color:#c00!important;
}

希望这有帮助。

Answer 2

您可以将jQuery.filter用于此目的：

$("yourTable tr").filter(function(index) {
    return someTest($(this));
}).css("background-color", "yourColor");

查看this page了解详情。

如何根据数据显示不同颜色的整个表tr

2 个答案: