CODEWITHSUNDEEP
javascriptjquery
Maki
Maki

Reputation: 637

AddClass to match statements

I am trying to allocate tbody into 1 of 2 different class. I can't seem to get the if statement running, perhaps I have not used the syntax correctly?


condition 1: If tbody id = today (yyyymm), then add class "current"
condition 2: If tbody id < today (yyyymm), then add class "past"
condition 3: If tbody id > today (yyyymm), then add do nothing

$(function(){
var d = new Date();
var month = d.getMonth()+1;
var day = d.getDate();
var output = d.getFullYear() + (month<10 ? '0' : '') + month;
var checktbody = $('tbody').attr('id');
//alert(output);

if(checktbody == output) {
$(this).addclass("current");
}

//$("table#ttrate").find("tbody".attr("id") == output).addclass("current");

});
table#ttx{margin-left:40px; border-collapse:collapse;}
#ttx th {padding-top: 18px; text-align:left;}
#ttx td {padding-left: 18px;}
#ttx tbody.current {background-color: #FFFF99;}
#ttx tbody.past {color: #B8B8B8;}
<table id="ttx">
<tbody id="201801">
<tr><th colspan="2">Jan-2018</th></tr>
<tr><td>Buy</td><td>23,000</td></tr>
<tr><td>Sell</td><td>10,250</td></tr>
</tbody>

<tbody id="201712">
<tr><th colspan="2">Dec-2017</th></tr>
<tr><td>Buy</td><td>20,000</td></tr>
<tr><td>Sell</td><td>12,500</td></tr>
</tbody>

<tbody id="201711">
<tr><th colspan="2">Nov-2017</th></tr>
<tr><td>Buy</td><td>10,000</td></tr>
<tr><td>Sell</td><td>8,750</td></tr>
</tbody>

</table>

Upvotes: 0

Views: 44

Answers (2)

Christian Santos
Christian Santos

Reputation: 5456

First off, grab each tbody on the page and loop through each one using $.each:

$.each( $("tbody"), function(index, el) { ... });

In order to achieve the 3 conditions that you stated, we have to rethink how the application is currently coded. Right now, you are comparing strings to see whether the element's date is current or past.

A better way of doing this would be to use Date objects to facilitate date comparisons.

See the code below. We use regular expressions to extract year and month from the id of each tbody and we use that to create a Date object, which we then compare to today's Date object:

$(function(){

  var now = new Date(); // today's date
  var nowYear = now.getFullYear();
  var nowMonth = now.getMonth();

  var today = new Date(nowYear, nowMonth);
  var todayTime = today.getTime(); // get today in milliseconds so we can run comparisons

  $.each( $("tbody"), function(index, el) {

    var $el = $(el);
    var id = $el.attr('id');

    // Get year, month, day using regex
    var rxArr = id.match(/(\d{4})(\d{2})/); 
    var year = rxArr[1];
    var month = parseInt(rxArr[2]) - 1; // we need month - 1 to pass to Date object

    var elDate = new Date(year, month);
    var elDateTime = elDate.getTime(); // returns milliseconds so we run comparisons

    if(elDateTime === todayTime) {
      $el.addClass("current");
    } else if(elDateTime < todayTime) {
      $el.addClass("past");
    }

  });
});
table#ttx{margin-left:40px; border-collapse:collapse;}
#ttx th {padding-top: 18px; text-align:left;}
#ttx td {padding-left: 18px;}
#ttx tbody.current {background-color: #FFFF99;}
#ttx tbody.past {color: #B8B8B8;}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<table id="ttx">
  <tbody id="201801">
  <tr><th colspan="2">Jan-2018</th></tr>
  <tr><td>Buy</td><td>23,000</td></tr>
  <tr><td>Sell</td><td>10,250</td></tr>
</tbody>

<tbody id="201712">
  <tr><th colspan="2">Dec-2017</th></tr>
  <tr><td>Buy</td><td>20,000</td></tr>
  <tr><td>Sell</td><td>12,500</td></tr>
</tbody>

<tbody id="201711">
  <tr><th colspan="2">Nov-2017</th></tr>
  <tr><td>Buy</td><td>10,000</td></tr>
  <tr><td>Sell</td><td>8,750</td></tr>
</tbody>

</table>

Upvotes: 1

yqlim
yqlim

Reputation: 7080

What you need to do is to check whether each tbody has matching id.

Your original syntax var checktbody = $('tbody').attr('id'); only gets one tbody from all the tbodies.

So, what you need to do is to use for loop in pure JavaScript, or if in jQuery, a jQuery.each().

$('tbody').each(function(index, tb){

    // Do all your if-else logic here
    if (tb.id == output)
        $(tb).addClass(...);

    /* more logic here */

});


$(function(){
var d = new Date();
var month = d.getMonth()+1;
var day = d.getDate();
var output = d.getFullYear() + (month<10 ? '0' : '') + month;

/* DELETE THIS
var checktbody = $('tbody').attr('id');
//alert(output);

if(checktbody == output) {
$(this).addclass("current");
}
*/

// ADD THIS
$('tbody').each(function(i, v){

  if (v.id == output)
    $(this).addClass('current');

  /* more logic here */

});

//$("table#ttrate").find("tbody".attr("id") == output).addclass("current");

});
table#ttx{margin-left:40px; border-collapse:collapse;}
#ttx th {padding-top: 18px; text-align:left;}
#ttx td {padding-left: 18px;}
#ttx tbody.current {background-color: #FFFF99;}
#ttx tbody.past {color: #B8B8B8;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="ttx">
<tbody id="201801">
<tr><th colspan="2">Jan-2018</th></tr>
<tr><td>Buy</td><td>23,000</td></tr>
<tr><td>Sell</td><td>10,250</td></tr>
</tbody>

<tbody id="201712">
<tr><th colspan="2">Dec-2017</th></tr>
<tr><td>Buy</td><td>20,000</td></tr>
<tr><td>Sell</td><td>12,500</td></tr>
</tbody>

<tbody id="201711">
<tr><th colspan="2">Nov-2017</th></tr>
<tr><td>Buy</td><td>10,000</td></tr>
<tr><td>Sell</td><td>8,750</td></tr>
</tbody>

</table>

Upvotes: 1

Related Questions