Javascript 如何在获取JSON的HTML表中添加多个下拉过滤器？

我制作了一个HTML表格，通过JSON从Google工作表中获取数据

我需要根据不同列中的多个数据在表上设置下拉过滤器。还可以为特定列（G列和H列）设置数字范围筛选器，为C列设置时间范围筛选器吗

我被卡在上面，找不到上面的任何工作代码。任何参考资料也会有帮助。 谢谢

HTML代码

 // JS starts here

url = 'https://spreadsheets.google.com/feeds/list/1sLlp6FMIRYLbcyq_59x_m2Ly4mm4ZilWL0EHmjsSA8s/1/public/values?alt=json';

function Get(url){
    var Httpreq = new XMLHttpRequest(); // a new request
    Httpreq.open("GET",url,false);
    Httpreq.send(null);
    return Httpreq.responseText;          
}

var json_obj = JSON.parse(Get(url)); 
var feed_length = json_obj.feed.entry.length; 


for (value = 0; value < feed_length; value++) { 
    var data_array = json_obj.feed.entry[value];
    var notice = data_array['gsx$notice']['$t'];
    var date = data_array['gsx$date']['$t'];
    var time= data_array['gsx$time']['$t'];
    var city = data_array['gsx$city']['$t'];
    var country = data_array['gsx$country']['$t'];
    var status = data_array['gsx$status']['$t'];
    var pmdnumber = data_array['gsx$pmdnumber']['$t'];
    var cknnumber= data_array['gsx$cknnumber']['$t'];


    document.getElementById('data').innerHTML+= ('<div class="panel-default panel-body card">'+ 
     '<div class="column1">'+
     '<p><span class="label label-warning">'+notice+'</span></p>'+
     '<p><span class="label label-warning label-big">'+city+'&nbsp;&nbsp;'+country+'</span></p>'+ 
     '</div>'+

     '<div class="column2">'+
     '<p><span class="label label-warning label-big">'+date+'&nbsp;&nbsp;'+time+'</span></p>'+
     '</div>'+

     '<div class="column3">'+
     '<p><span class="label label-warning">'+pmdnumber+'</span></p>'+
     '<p><span class="label label-warning">'+cknnumber+'</p>'+
     '</div>'+

     '<div class="column4">'+
     '<p class="label label-success label-big">'+status+'</p>'+ '</div>' +

     '</div>' 
     );
}

布告栏
布告栏

Javascript代码

 // JS starts here

url = 'https://spreadsheets.google.com/feeds/list/1sLlp6FMIRYLbcyq_59x_m2Ly4mm4ZilWL0EHmjsSA8s/1/public/values?alt=json';

function Get(url){
    var Httpreq = new XMLHttpRequest(); // a new request
    Httpreq.open("GET",url,false);
    Httpreq.send(null);
    return Httpreq.responseText;          
}

var json_obj = JSON.parse(Get(url)); 
var feed_length = json_obj.feed.entry.length; 


for (value = 0; value < feed_length; value++) { 
    var data_array = json_obj.feed.entry[value];
    var notice = data_array['gsx$notice']['$t'];
    var date = data_array['gsx$date']['$t'];
    var time= data_array['gsx$time']['$t'];
    var city = data_array['gsx$city']['$t'];
    var country = data_array['gsx$country']['$t'];
    var status = data_array['gsx$status']['$t'];
    var pmdnumber = data_array['gsx$pmdnumber']['$t'];
    var cknnumber= data_array['gsx$cknnumber']['$t'];


    document.getElementById('data').innerHTML+= ('<div class="panel-default panel-body card">'+ 
     '<div class="column1">'+
     '<p><span class="label label-warning">'+notice+'</span></p>'+
     '<p><span class="label label-warning label-big">'+city+'&nbsp;&nbsp;'+country+'</span></p>'+ 
     '</div>'+

     '<div class="column2">'+
     '<p><span class="label label-warning label-big">'+date+'&nbsp;&nbsp;'+time+'</span></p>'+
     '</div>'+

     '<div class="column3">'+
     '<p><span class="label label-warning">'+pmdnumber+'</span></p>'+
     '<p><span class="label label-warning">'+cknnumber+'</p>'+
     '</div>'+

     '<div class="column4">'+
     '<p class="label label-success label-big">'+status+'</p>'+ '</div>' +

     '</div>' 
     );
}

//JS从这里开始
url='1〕https://spreadsheets.google.com/feeds/list/1sLlp6FMIRYLbcyq_59x_m2Ly4mm4ZilWL0EHmjsSA8s/1/public/values?alt=json';
函数Get（url）{
var Httpreq=new XMLHttpRequest（）；//一个新请求
Httpreq.open（“GET”，url，false）；
Httpreq.send（空）；
返回Httpreq.responseText；
}
var json_obj=json.parse（Get（url））；
var feed_length=json_obj.feed.entry.length；
对于（值=0；值“+
“”+城市+“+国家+”
”+
''+
''+
“”+日期+”+时间+”
”+
''+
''+
“”+pmdnumber+”
”+
“”+cknnumber+”
”+
''+
''+
“
”+状态+”
“+”+
'' 
);
}

我认为JSON可以在循环内部运行之前过滤掉

谷歌电子表格链接

电子表格JSON链接