Question

简短描述：

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

02）我使用第一列（NAME）页面顶部的过滤器过滤结果。如果我将它包含在<script>标记下的HTML文件中，该脚本可以工作，但是当我将所有函数放在外部.js文件中时它不起作用。

链接显示在此处：LINK

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

Answer 1

关于过滤器功能，您在.click(function filter() { ... });内命名此功能，然后在尝试使用＆＃34; .click＆＃34;之外在$('body').on('input', 'input:checkbox', filters);

我认为你必须做一些像

这样的事情

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

或更好，您不需要使用.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();
    }
});

这样，您就可以在input:checkbox上存在的每个body上附加点击事件，并且也会附加到新输入

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

1 个答案: