How to display entire table tr in different color based on data

2018-06-10 11:50:28

I am displaying Stock Symbols in a table using Jquery tableSorter .

My requirement is that if close price is greater than yesterdays close

I want to display the entire tr row in green color

Or else

Display the entire tr row in red color

Similar to as shown in this fiddle (for green color display purpose)

http://jsfiddle.net/cmhmb34j/2/

This is my code

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);

And this is my fiddle

Could you please let me know how to display it in red or green color based on dynamic data ??

You have problem in your condition so the class will be not assigned to the class_toadd variable, you should replace :

if (parseFloat(close_val > prevclose_val)) {
    class_toadd = "greenclass";
} else if (parseFloat(close_val < prevclose_val)) {
    class_toadd = "redclass";
}

By :

if (parseFloat(close_val) > parseFloat(prevclose_val)) {
    class_toadd = "greenclass";
} else if (parseFloat(close_val) < parseFloat(prevclose_val)) {
    class_toadd = "redclass";
}

Hope this helps.

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>

You can use jQuery.filter for this purpose:

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

Check this page for more info.

链接地址: http://www.djcxy.com/p/31032.html

上一篇: jQuery Datatables根据条件更改列的值

下一篇: 如何根据数据显示不同颜色的整个表格tr