jQuery从HTML表中选择值

我不熟悉jQuery。也许这是一个很简单的问题，但我不知道怎么做

我有这张桌子：

<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>

我想在此表上方添加一个下拉列表，您可以在其中选择以下值/年龄：50或以下/51-80/80及以上

---

例如，如果选择了“80岁及以上”，则表中只应显示80岁的John Doe和94岁的Eve Jackson。

将表的详细信息存储在json对象中，如var table_data=[['Jill'，'Smith'，50]，'Eve'，'Jackson'，94]，'John'，'Doe'，'80']

然后使用以下代码为下拉列表创建更改事件

您可以尝试以下方法：

HTML

JS

---

非常感谢你。太完美了。我将尝试从您的代码中学习：

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>'

$('#div_id').html(table_data_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>

$("#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();
            }
        }); 
    }
});