jQuery Select Value from HTML Table

Question

I am new to jQuery. Maybe this is a very simple question, but I have no idea how to do it.

I have this table:

<table class="mytable">
<th>name</th>
<th>second</th>
<th>age</th>
  <tr>
    <td>Jill</td>
    <td>Smith</td>      
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>        
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
</table>

I want to add a dropdown list above this table where you can select following values/ages: 50 or below / 51 - 80 / 80 and above.

For example if '80 and above is selected', only John Doe (age 80) and Eve Jackson (age 94) should be show in the table.

Brijesh Bhatt · Accepted Answer · 2015-08-12 09:15:10Z

2

You can try this:

HTML

<select id="age">
    <option>Select</option>
    <option value="50">50 or below</option>
    <option value="80">51 - 80</option>
    <option value="100">80 and above</option>
</select>
<table class="mytable">
    <tr>
    <th>name</th>
    <th>second</th>
    <th>age</th>
    </tr>  
    <tr>
    <td>Jill</td>
    <td>Smith</td>      
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>        
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>        
    <td>80</td>
  </tr>
</table>

JS

$("#age").on("change", function(){
    $("tr").show();
    if($(this).val()=="50") {
        $("table tr").not(":first").each(function(){
            if($(this).find("td:last").html()==50) {
                $(this).show();
            }
            else {
                $(this).hide();
            }
        }); 
    }
    if($(this).val()=="80") {
        $("table tr").not(":first").each(function(){
            if($(this).find("td:last").html()>50 && $(this).find("td:last").html()<=80) {
                $(this).show();
            }
            else {
                $(this).hide();
            }
        }); 
    }
    if($(this).val()=="100") {
        $("table tr").not(":first").each(function(){
            if($(this).find("td:last").html()>80) {
                $(this).show();
            }
            else {
                $(this).hide();
            }
        }); 
    }
});

DEMO

answered Aug 12, 2015 at 9:15

Brijesh Bhatt

3,8303 gold badges20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

10now Over a year ago

Thank you very much. It's perfect. I will try to learn from your code :)

Jameel Mohammed · Accepted Answer · 2015-08-12 09:13:12Z

0

store the table details in json object like
var table_data = [['Jill','Smith',50],['Eve','Jackson',94],['John','doe','80']]

then create a change event for drop-down list with below code

var table_data_html = '<table class="mytable"><th>name</th><th>second</th><th>age</th>'
for (var i = 0; i < table_data.length; i++) {
   if (your custom condition with table_data[i][2]  for example table_data[i][2]<50 ){
     table_data_html+='<tr id="black"><td>'+table_data[i][0]+'</td><td>'+table_data[i][1]+'</td><td>'+table_data[i][2]+'</td></tr>'
   }


};
table_data_html+='</table>'

then you assign this table_data_html value to any div as below

$('#div_id').html(table_data_html);

answered Aug 12, 2015 at 9:13

Jameel Mohammed

2,37421 silver badges33 bronze badges

Collectives™ on Stack Overflow

jQuery Select Value from HTML Table

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related