使用查询混乱从JSON url添加数据（HTML表）

A short description :

简短说明：

01) I dynamically load data from a JSON url into an HTML table. The script is in the external .js file called in the header of the HTML file.

01）我将数据从JSON url动态加载到HTML表中。该脚本位于HTML文件头中调用的外部.js文件中。

02) I filter the results using a filter at the top of the page for the first column (NAME). The script works if I include it in the HTML file under the <script> tag but it does not work when I put all functions in an external .js file.

02）我使用第一列（NAME）页面顶部的过滤器过滤结果。如果我将它包含在

The link is shown here : LINK

链接如下所示：LINK

And the JS script is here :

JS脚本在这里：

    //It loads the data from the JSON file 
$.getJSON(
     'http://apolosiskos.co.uk/TEB/MOCK_DATA.json',
     function(data){
         var tr;
//It loads data from the JSON file to the table
         $.each (data, function (key, val) {
            tr = $('<tr/>');
            tr.append('<td class="name" rel="' + val.first_name + '">' + val.first_name + '</td>');
            tr.append('<td >' + 'TEST' + '</td>');
            tr.append('<td class="metric2" >' + val.id + '</td>');
            tr.append('<td class="metric3"><span class="multTotal">' +'0.00'+ '</span></td>');
        tr.append('<td class="metric3-100"><span class="metric3-100">' +'0.00'+ '</span></td>');
        tr.append('<td class="metric1-100"><span class="metric1-100">' +'0.00'+ '</span></td>');
            $('table').append(tr);
         });
       });

//The filter function for the first column (NAME)
$("input:checkbox").click(function filters() {
    var showAll = true;
    $('tr').not('.first').hide();
    $('input[type=checkbox]').each(function () {
        if ($(this)[0].checked) {
            showAll = false;
            var dimension1= $(this).attr('rel');
            var value = $(this).val();            
            $('td.' + dimension1+ '[rel="' + value + '"]').parent('tr').show();
        }
    });
    if(showAll){
        $('tr').show();
    }
});

$('body').on('input', 'input:checkbox', filters);

1 个解决方案

#1

About the filter function, you named this function inside the .click(function filter() { ... }); and after you're trying to use outside of ".click" in $('body').on('input', 'input:checkbox', filters);

关于过滤器函数，您在.click（函数过滤器（）{...}）中命名了此函数;并且在你尝试在$（'body'）中使用“.click”之后。（'input'，'input：checkbox'，过滤器）;

I think you have to get do something like

我想你必须做点什么

function filters(){ ... };
$("input:checkbox").click( filters );
$('body').on('input', 'input:checkbox', filters);

or better, you don't need use the .click, just try to use like that way:

或者更好，你不需要使用.click，只是尝试使用这种方式：

$('body').on('click', 'input:checkbox', function(){
    var showAll = true;
    $('tr').not('.first').hide();
    $('input[type=checkbox]').each(function () {
        if ($(this)[0].checked) {
            showAll = false;
            var dimension1= $(this).attr('rel');
            var value = $(this).val();            
            $('td.' + dimension1+ '[rel="' + value + '"]').parent('tr').show();
        }
    });
    if(showAll){
        $('tr').show();
    }
});

that way, you're attaching the click event on every input:checkbox that exists on body and will attach to the new inputs too

这样，您在每个输入上附加了click事件：身体上存在的复选框也将附加到新输入

#1