Home > database >  Get table row data based on search using JQuery
Get table row data based on search using JQuery

Time:01-16

I have a table with some data of names and date of birth rows. Now I want if today's date matches with anybody's birth date then it should show his birthday reminder. I am getting the matching rows based on today's date search but I am not able to get values of table data (td). In my following code, I want to show his "Name" and "How old he is?" in the reminder.

Code:

$(document).ready(function() {
  
  var date = new Date()
var day = date.getDate();
var month = date.getMonth() 1;

if(month == "1")
 {
 month = "January";
 }
 else if(month == "2")
 {
 month = "February";
 }
 else if(month == "3")
 {
 month = "March";
 }
 else if(month == "4")
 {
 month = "April";
 }
 else if(month == "5")
 {
 month = "May";
 }
 else if(month == "6")
 {
 month = "June";
 }
  else if(month == "7")
 {
 month = "July";
 }
    else if(month == "8")
 {
 month = "August";
 }
 else if(month == "9")
 {
 month = "September";
 }
 else if(month == "10")
 {
 month = "October";
 }
 else if(month == "11")
 {
 month = "November";
 }
 else if(month == "12")
 {
 month = "December";
 }

var fullDate = day " " month;

var value = fullDate;

    $("#myTable tr").each(function(index) {
        if (index != 0) {

            $row = $(this);

            var id = $row.find("td:eq(1)").text();

            if (id.indexOf(value) != 0) {
                //$(this).hide();                
            }
            else {
                //$(this).show();
                document.getElementById("itsBirthday").innerHTML  = "Hooray its " $(this).value " Birthday today and he is become " $(this).value " years old:)" "<br><br>";
            }
        }
    });
    
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="itsBirthday"></div><br>

<table id="myTable" style="border: 1px solid black; width: 100%;">
<thead>
<tr style="background-color: pink; color: black;"><th scope="col">Name</th><th scope="col">DOB</th><th scope="col">Age</th><th scope="col">Place of Birth</th></tr>
</thead><tbody>
  
  <tr><td><b>Onion</b></td><td>16 January 1975</td><td>47</td><td>USA</td></tr>
  
  <tr><td><b>Tomato</b></td><td>18 January 1955</td><td>67</td><td>England</td></tr>
  
  <tr><td><b>Chilli</b></td><td>16 January 1996</td><td>25</td><td>USA</td></tr>
  
  </tbody></table>

CodePudding user response:

You just need to work bit more on selectors

$(document).ready(function() {
  
  var date = new Date()
var day = date.getDate();
var month = date.getMonth() 1;

if(month == "1")
 {
 month = "January";
 }
 else if(month == "2")
 {
 month = "February";
 }
 else if(month == "3")
 {
 month = "March";
 }
 else if(month == "4")
 {
 month = "April";
 }
 else if(month == "5")
 {
 month = "May";
 }
 else if(month == "6")
 {
 month = "June";
 }
  else if(month == "7")
 {
 month = "July";
 }
    else if(month == "8")
 {
 month = "August";
 }
 else if(month == "9")
 {
 month = "September";
 }
 else if(month == "10")
 {
 month = "October";
 }
 else if(month == "11")
 {
 month = "November";
 }
 else if(month == "12")
 {
 month = "December";
 }

var fullDate = day " " month;

var value = fullDate;

    $("#myTable tr").each(function(index) {
        if (index != 0) {

            $row = $(this);

            var id = $row.find("td:eq(1)").text();
            var name = $row.find("td:eq(0) b").text();
            var age = $row.find("td:eq(2)").text();

            if (id.indexOf(value) != 0) {
                //$(this).hide();                
            }
            else {
                //$(this).show();
                document.getElementById("itsBirthday").innerHTML  = "Hooray its " name " Birthday today and he is become " age " years old:)" "<br><br>";
            }
        }
    });
    
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div id="itsBirthday"></div><br>

<table id="myTable" style="border: 1px solid black; width: 100%;">
<thead>
<tr style="background-color: pink; color: black;"><th scope="col">Name</th><th scope="col">DOB</th><th scope="col">Age</th><th scope="col">Place of Birth</th></tr>
</thead><tbody>
  
  <tr><td><b>Onion</b></td><td>16 January 1975</td><td>47</td><td>USA</td></tr>
  
  <tr><td><b>Tomato</b></td><td>18 January 1955</td><td>67</td><td>England</td></tr>
  
  <tr><td><b>Chilli</b></td><td>16 January 1996</td><td>25</td><td>USA</td></tr>
  
  </tbody></table>

  •  Tags:  
  • Related