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

简短描述：

01）我将数据从JSON url动态加载到HTML表中。脚本位于

HTML

文件头中调用的外部

.js

文件中

02）I使用页面顶部第三列（主值）的过滤器过滤结果。当我有静态数据时，脚本运行良好。自从我开始从JSON url动态地pullimg表数据后，它就停止工作了

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);
             });
            $("input").keyup(minmax);
            //I even tried the below but did not work
            $('body').on('input', '#counter-low, #counter-high', minmax);
           });

    //The filter function for the MIN MAX values in the MAIN VALUE column
    function minmax() {
        var table = $('table').DataTable();
        $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
            return parseFloat(data[2]) >= parseFloat($('#counter-low').val() || data[2]) 
                && parseFloat(data[2]) <= parseFloat($('#counter-high').val() || data[2])
        });
        $('#counter-low, #counter-high').on('keyup', table.draw);
    }

//它从JSON文件加载数据
$.getJSON(
'http://apolosiskos.co.uk/TEB/MOCK_DATA.json',
功能（数据）{
var-tr；
//它将数据从JSON文件加载到表中
$。每个（数据、函数（键、值）{
tr=$（''）；
tr.append（“”+val.first_name+“”）；
tr.append（“+”测试“+”）；
tr.append（“”+val.id+“”）；
tr.append（''+'0.00'+''）；
tr.append（''+'0.00'+''）；
tr.append（''+'0.00'+''）；
$（'table'）。追加（tr）；
});
$（“输入”）.keyup（最小值）；
//我甚至尝试了下面的方法，但没有成功
$（'body'）。在（'input'、'反低'、'反高'、minmax）上；
});
//主值列中最小最大值的过滤函数
函数minmax（）{
var table=$（'table'）.DataTable（）；
$.fn.dataTable.ext.search.push（函数（设置、数据、数据索引）{
return parseFloat（data[2]）>=parseFloat（$（'#counter low'）.val（）| data[2]）
&&parseFloat（数据[2]）=parseFloat（$（'#计数器低位'）.val（）| |数据[2]）
&&parseFloat（data[2]）那么，回答这里的问题，我已经下载了您的html、json和js。
然后我有3个变化

我将所有内容都放在
$（function（）{}）；
中，以便JS在加载整个DOM之后执行所有内容
在最小和最大输入中添加一个类，如：



在js中设置为
$（'.counter'）.keyup（minmax）
；将这个minmax作为您已经创建的函数

我将表格html放在如下位置：


名称
输入
主要价值
差异
差/100
MV/100

所以，这对我来说很有效，我不知道是不是

第二次编辑
我在这里这样做，我只是对您的getJson进行了注释，以便将数据直接添加到您的表中，然后，我做了我之前说过的：

1-使用
$（函数（）{..}）；

2-在计数器高和计数器低上添加类，只需将事件附加到它们，然后使用
$（'.className'）.keyup（minmax）；
及

3-在表中添加thead和tbody元素


//它从JSON文件加载数据
$（函数（）{
var数据=[{“id”：2.2，“名字”：“黛布拉”，“姓氏”：“罗德里格斯”，“电子邮件”：drodriguez0@admin.ch，“性别”：“女性”，“ip地址”：“90.22.159.108”}，
{“id”：2，“名字”：“朱莉”，“姓氏”：“林奇”，“电子邮件”：jlynch1@tumblr.com，“性别”：“女性”，“ip地址”：“54.182.62.180”}，
{“id”：3，“名字”：“诺玛”，“姓氏”：“华盛顿”，“电子邮件”：nwashington2@theatlantic.com“，”性别“：”女性“，”ip_地址“：”70.163.106.64”}，
{“id”：4，“名字”：“Bobby”，“姓氏”：“Castillo”，“电子邮件”：bcastillo3@nbcnews.com“，”性别“：”男性“，”ip_地址“：”91.202.59.171”}，
{“id”：5，“名字”：“亨利”，“姓氏”：“查韦斯”，“电子邮件”：hchavez4@chronoengine.com，“性别”：“男性”，“ip地址”：“32.237.37.185”}，
{“id”：6，“名字”：“黛布拉”，“姓氏”：“霍华德”，“电子邮件”：showard5@stumbleupon.com，“性别”：“女性”，“ip地址”：“17.217.42.49”}，
{“id”：7，“名字”：“杰森”，“姓氏”：“鲍威尔”，“电子邮件”：jpowell6@telegraph.co.uk，“性别”：“男性”，“ip地址”：“14.81.195.117”}，
{“id”：8，“名字”：“肖恩”，“姓氏”：“伯恩斯”，“电子邮件”：sburns7@hp.com，“性别”：“男性”，“ip地址”：“213.164.85.212”}，
{“id”：9，“名字”：“杰奎琳”，“姓氏”：“戈登”，“电子邮件”：jgordon8@bloglines.com，“性别”：“女性”，“ip地址”：“18.251.62.55”}，
{“id”：10，“名字”：“拉塞尔”，“姓氏”：“理查兹”，“电子邮件”：rrichards9@com.com，“性别”：“男性”，“ip地址”：“27.226.59.80”}，
{“id”：11，“名字”：“Albert”，“姓氏”：“Perkins”，“电子邮件”：aperkinsa@hc360.com，“性别”：“男性”，“ip地址”：“243.122.251.248”}，
{“id”：12，“名字”：“迈克尔”，“姓氏”：“威利斯”，“电子邮件”：mwillisb@deviantart.com，“性别”：“男性”，“ip地址”：“252.197.211.230”}，
{“id”：13，“名字”：“琼”，“姓氏”：“汉密尔顿”，“电子邮件”：jhamiltonc@weebly.com，“性别”：“女性”，“ip地址”：“204.70.110.117”}，
{“id”：14，“名字”：“埃里克”，“姓氏”：“加西亚”，“电子邮件”：egarciad@yahoo.co.jp，“性别”：“男性”，“ip地址”：“178.221.216.3”}，
{“id”：15，“名字”：“弗兰克”，“姓氏”：“奥尔森”，“电子邮件”：folsone@amazon.co.uk，“性别”：“男性”，“ip地址”：“245.25.170.33”}，
{“id”：16，“名字”：“凯利”，“姓氏”：“富勒”，“电子邮件”：kfullerf@tripod.com“，”性别“：”女性“，”ip_地址“：”199.209.173.51”}，
{“id”：17，“名字”：“弗兰克”，“姓氏”：“库克”，“电子邮件”：fcookg@google.com，“性别”：“男性”，“ip地址”：“58.30.243.1”}，
{“id”：18，“名字”：“艾伦”，“姓氏”：“赖斯”，“电子邮件”：ariceh@sciencedirect.com，“性别”：“男性”，“ip地址”：“44.231.199.117”}，
{“id”：19，“名字”：“马克”，“姓氏”：“格林”，“电子邮件”：mgreenei@paypal.com，“性别”：“男性”，“ip地址”：“45.34.44.2”}，
{“id”：20，“名字”：“查尔斯”，“姓氏”：“国王”，“电子邮件”：ckingj@clickbank.net“，”性别“：”男性“，”ip_地址“：”237.30.205.186“}]；
//$.getJSON(
//'http://apolosiskos.co.uk/TEB/MOCK_DATA.json',
//功能（数据）{
var-tr；
//它将数据从JSON文件加载到表中
$。每个（数据、函数（键、值）{
tr=$（''）；
T
$(function(){

//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 ><input class="metric1"/>' + '</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);
         });
//It loads dimension1 from the JSON file to the filter
         $.each (data, function (key, val) {
            li = $('<li/>');
            li.append('<input rel="name" type="checkbox" value="' + val.first_name + '"><label for="cb1">' + val.first_name + '</label></li>');
            $('ul').append(li);
         });
       $('.counter').keyup(minmax);
       $('body').on('input click', 'input:checkbox', filters);
       });

});

//Multiplication of the cells function
function multInputs() {
    var mult = 0;
    $("tr").each(function () {
        var $val1 = $('.metric1', this).val();
        var $val2 = $('.metric2', this).text();
        var $total = ($val1 * 1) * $val2 - $val1;
        $('.multTotal', this).text($total.toPrecision(3));

        var $val3 = $('.multTotal', this).text();
        var $total2 = $val3 / 100
        $('.metric3-100',this).text($total2.toPrecision(3));

        var $total3 = $val1 / 100
        $('.metric1-100',this).text($total3.toPrecision(2));

        mult += $total;
    });
}

//Filter function for the Dimension1 values
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();
    }
}

//The filter function for the MIN MAX values in the MAIN VALUE column
    function minmax() {
        var table = $('table').DataTable();
        $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
            return parseFloat(data[2]) >= parseFloat($('#counter-low').val() || data[2]) 
                && parseFloat(data[2]) <= parseFloat($('#counter-high').val() || data[2])
        });
        $('#counter-low, #counter-high').on('keyup', table.draw);
    }