How to get and set value to html tag using array in javascript?

Question

I want to highlight color to many rows if its date value passes my condition as below code

I'm retrieving from_date and to_date from database by using foreach() in php and I will extract it into rows of table and I want to highlight with red color to some rows of table if from_date and to_date value pass my condition as below javascript

But I don't know how to do it with javascript code to find all id selector of html and set its color to red,black,blue if from_date and to_date passes condition.

<table>
   <tr class="highlight">
      <td>ID:</td>
      <td id="from">From Date: 2014-11-28</td>
      <td id="to">To Date: 2014-11-30</td>
   </tr>
   <tr class="highlight">
      <td>ID:</td>
      <td id="from">From Date: 2014-11-28</td>
      <td id="to">To Date: 2014-11-28</td>
   </tr>
   <tr class="highlight">
     <td>ID:</td>
     <td id="from">From Date: 2014-11-28</td>
     <td id="to">To Date: 2014-11-28</td>
  </tr>
  <tr class="highlight">
     <td>ID:</td>
     <td id="from">From Date: 2014-11-28</td>
     <td id="to">To Date: 2014-12-01</td>
  </tr>
  <tr class="highlight">
     <td>ID:</td>
     <td id="from">From Date: 2015-01-01</td>
     <td id="to">To Date: 2015-01-30</td>
  </tr>
</tabl>

As above html code I want to use array in javascript to check all id html selector to check its from_date and to_date value and set red color to highlight class (class="highlight") by condition.

            <script> 
            var today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
            var from_day = document.getElementById("from");
            var to_day   = document.getElementById("to");
            var highlight = [];

            var get_from_day = new Date(from_day);
            var get_to_day   = new Date(to_day);

            var i = document.getElementById();

            if(get_from_day.getTime() == get_to_day.getTime()){
                 highlight[] = "red";
                        }
            if(get_from_day.getTime() > get_to_day.getTime()){
                highlight[] = "blue";
                        }
            if(get_to_day.getTime() == today.getTime()){
                highlight[] = "black";
            }else{
                if(highlight){
                    for(i=0;i<=;i++){
            document.getElementById("highlight").style.background-color = highlight;
                        }
                }
            } 
        </script>

Thanks advance for help

it would be good to know what is your "condition" for showing red ? Is it in php function or you have to write it in JS ? — Pranav
– Pranav, Commented Nov 28, 2014 at 10:08
If you can do it in PHP then while iterating over elements you can assign style class to rows which passes your condition. — Pranav
– Pranav, Commented Nov 28, 2014 at 10:10
I want to use Js to find all Id selector and set its background-color: to red if from_date and to_date passes my conditiona. exp: if(from_date == to_date){set id="highlight" css = red} — Cootel Kh
– Cootel Kh, Commented Nov 28, 2014 at 10:11
Would be good if you can post a sample HTML output. With PHP code only, we have no idea what the output in HTML looks like. — Terry
– Terry, Commented Nov 28, 2014 at 10:11

Atul Nar · Accepted Answer · 2014-11-28 10:18:54Z

assign fromDate and toDate as class name to eg.

<td class="fromDate " id="<?php echo "from".$i;?>">from date</td>
<td class="toDate"  id="<?php echo "to".$i;?>">To date</td>

try this

$('#mytab1 tr').each(function(){

   $(this).find('td').each(function(){
      if($(this).attr("class")=="fromDate")
      {
        var fromdata=$(this).text();
        // Apply your checking and applying color logic here
      }
      else if($(this).attr("class")=="toDate")
      { 
         var todata=$(this).text();
        // Apply your checking and applying color logic here
      }
   });
});

Collectives™ on Stack Overflow

How to get and set value to html tag using array in javascript?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related