How to display only those Rows of a Table between two dates using Javascript?

Question

I have a PHP Script which generates an HTML Table such as this:

This table displays the details of the Stock that was added to the Stationery.

Item   | Quantity | Date    
------------------------------
Pencil | 100      | 2013-02-01  
Pencil | 100      | 2013-02-01  
Rubber | 100      | 2013-02-02  

Now, I want some client side script to display only those rows which lie between two dates. How do I do it? Please help.

Thanks.

Answer 1

You could use a javascript or jQuery script to check the value in the date cell and if it doesn't meet criteria then you could hide the row.

<table>
    <tr id="table-row-1">
        <td id="item-cell-1">
            Pencil
        </td>
        <td id="quantity-cell-1">
            100
        </td>
        <td id="date-cell-1">
            2013-02-01
        </td>
    </tr>
    etc...

jQuery

for(var i=0;i<count;i++) {
    var cellDate = Date.parse($("date-cell-" + i).text());
    //Check if date is between what your want, if not then hide
    $("table-row-" + i).empty(); //or you could hide using css display:none;
}

Answer 2

[1]: https://i.stack.imgur.com/I1WOv.png

Here is the code

function myFunction() {

  var input1,input2, filter, table, tr, td, i;
  input1 = document.getElementById("dateStart").value;
  input2 = document.getElementById("dateEnd").value;
  table = document.getElementById("question1-list");
  tr = table.getElementsByTagName("tr");
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[4].innerHTML;
    var d1=input1.split("-");
    var d2=input2.split("-");
    var c=td.split("-");
    var from=new Date(d1[0],parseInt(d1[1])-1,d1[2]);
    var to   = new Date(d2[0], parseInt(d2[1])-1, d2[2]);
    var check = new Date(c[0], parseInt(c[1])-1, c[2]);
   if(check>=from && check<=to)
   {

    tr[i].style.display = "";
   }
   else
   {

    tr[i].style.display = "none";
   }


  }
}