javascript - 使用困惑的查询(HTML 表)从 JSON url 添加数据-6ren

javascript - 使用困惑的查询(HTML 表)从 JSON url 添加数据

转载作者：行者123 更新时间：2023-12-02 13:44:37

简短描述:

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

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

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

UPD:我将在下面的答案之后有效的代码粘贴到此处:

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

最佳答案

所以，在这里回答，我已经下载了你的html、json和js。然后我做了 3 处更改。

我把所有东西都放在$(function(){});里面让 JS 在整个 DOM 加载完成后执行所有操作。
在最小和最大输入中添加一个类，例如:
<input id="counter-min" class="counter"/>
<input id="counter-max" class="counter"/>

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

我将表格 html 像这样放置:

<table> <thead> <tr id="ProductID" class="first"> <th>NAME</th> <th>INPUT</th> <th>MAIN VALUE</th> <th>DIFF</th> <th>DIFF /100</th> <th>MV /100</th> </tr> </thead> <tbody> </tbody> </table>

所以，这对我有用，我不知道是否有效

第二次编辑我在这里这样做，我只是注释了你的 getJson 来直接将数据添加到你的表上，然后，我做了我之前说的:

1 - 使用 $(function() { .. });

2 - 在反高和反低上添加类，只是将事件附加到它们，然后将事件附加到 $('.className').keyup( minmax );和

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

//It loads the data from the JSON file 
$(function() {
  
    var data = [{"id":2.2,"first_name":"Debra","last_name":"Rodriguez","email":"drodriguez0@admin.ch","gender":"Female","ip_address":"90.22.159.108"},
{"id":2,"first_name":"Julie","last_name":"Lynch","email":"jlynch1@tumblr.com","gender":"Female","ip_address":"54.182.62.180"},
{"id":3,"first_name":"Norma","last_name":"Washington","email":"nwashington2@theatlantic.com","gender":"Female","ip_address":"70.163.106.64"},
{"id":4,"first_name":"Bobby","last_name":"Castillo","email":"bcastillo3@nbcnews.com","gender":"Male","ip_address":"91.202.59.171"},
{"id":5,"first_name":"Henry","last_name":"Chavez","email":"hchavez4@chronoengine.com","gender":"Male","ip_address":"32.237.37.185"},
{"id":6,"first_name":"Debra","last_name":"Howard","email":"showard5@stumbleupon.com","gender":"Female","ip_address":"17.217.42.49"},
{"id":7,"first_name":"Jason","last_name":"Powell","email":"jpowell6@telegraph.co.uk","gender":"Male","ip_address":"14.81.195.117"},
{"id":8,"first_name":"Sean","last_name":"Burns","email":"sburns7@hp.com","gender":"Male","ip_address":"213.164.85.212"},
{"id":9,"first_name":"Jacqueline","last_name":"Gordon","email":"jgordon8@bloglines.com","gender":"Female","ip_address":"18.251.62.55"},
{"id":10,"first_name":"Russell","last_name":"Richards","email":"rrichards9@com.com","gender":"Male","ip_address":"27.226.59.80"},
{"id":11,"first_name":"Albert","last_name":"Perkins","email":"aperkinsa@hc360.com","gender":"Male","ip_address":"243.122.251.248"},
{"id":12,"first_name":"Michael","last_name":"Willis","email":"mwillisb@deviantart.com","gender":"Male","ip_address":"252.197.211.230"},
{"id":13,"first_name":"Joan","last_name":"Hamilton","email":"jhamiltonc@weebly.com","gender":"Female","ip_address":"204.70.110.117"},
{"id":14,"first_name":"Eric","last_name":"Garcia","email":"egarciad@yahoo.co.jp","gender":"Male","ip_address":"178.221.216.3"},
{"id":15,"first_name":"Frank","last_name":"Olson","email":"folsone@amazon.co.uk","gender":"Male","ip_address":"245.25.170.33"},
{"id":16,"first_name":"Kelly","last_name":"Fuller","email":"kfullerf@tripod.com","gender":"Female","ip_address":"199.209.173.51"},
{"id":17,"first_name":"Frank","last_name":"Cook","email":"fcookg@google.com","gender":"Male","ip_address":"58.30.243.1"},
{"id":18,"first_name":"Alan","last_name":"Rice","email":"ariceh@sciencedirect.com","gender":"Male","ip_address":"44.231.199.117"},
{"id":19,"first_name":"Mark","last_name":"Greene","email":"mgreenei@paypal.com","gender":"Male","ip_address":"45.34.44.2"},
{"id":20,"first_name":"Charles","last_name":"King","email":"ckingj@clickbank.net","gender":"Male","ip_address":"237.30.205.186"}];
  
    //$.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);
            });
			
            $('body').on('click', 'input[type=checkbox]', minmax);
            $('.counter').keyup(minmax);
            $('input').keyup(multInputs);
            $('body').on('click', '#btnFilter', filtermin);
        });
//});


//The filter function for the first column (NAME)
//This have to work together of the minmax function
function filters() {
	
	//if anyone is checked, return true to show all
	var checkboxChecked = $('input[type=checkbox]:checked');
	if (checkboxChecked.length <= 0) {
		$('tr').show();
		return true;
	}
	
	$('tr').not('.first').hide();
	//else, find the name checked and verify with the name passed as parameter
	
    checkboxChecked.each(function() {
		var dimension1 = $(this).attr('rel');
		var value = $(this).val();
		
		$('td.' + dimension1 + '[rel="' + value + '"]').parent('tr').show();
    });
}

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

//The filter function for the MIN MAX values in the MAIN VALUE column
function minmax() {
	
	filters();
    $.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]);
    });
	
	var table = $('table').DataTable();
    $('#counter-low, #counter-high').on('keyup', table.draw);
}

function filtermin() {
    var value = $('#filter').val();

    $('tr').show();

    $('tr td.odds').each(function() {
        if ($(this).text() < value) {
            $(this).parent().hide();
        }
    });

}

<head>
    <meta charset="utf-8">
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <title>json extract in datorama tables</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="teste.js"></script>
    <link rel="stylesheet" href="css/main.css"/>
    <style href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"></style>
</head>

<body>
    <h1>discrepancy checker after extracting data in JSON</h1>
    <hr/>
    <div class="row">
        <div class="col-sm-4 filter-columns">
            <div class="ac-custom ac-checkbox ac-cross" autocomplete="off">
                <h2>Dimension1</h2>
                <ul>
                    <li><input rel="name" type="checkbox" value="Debra" id="cb1"><label for="cb1">Debra</label></li>
                    <li><input rel="name" type="checkbox" value="Julie" id="cb2"><label for="cb2">Julie</label></li>
                    <li><input rel="name" type="checkbox" value="Norma" id="cb3"><label for="cb3">Norma</label></li>
                    <li><input rel="name" type="checkbox" value="Bobby" id="cb4"><label for="cb4">Bobby</label></li>
                    <li><input rel="name" type="checkbox" value="Henry" id="cb5"><label for="cb5">Henry</label></li>
                </ul>
            </div>
        </div>
        <div class="col-sm-4 filter-columns-alt">
            <div class="ac-custom ac-checkbox ac-cross" autocomplete="off">
                <h2>MIN MAX</h2>
                Min:<input id="counter-low"  class="counter" type="text" /> &nbsp; 
				Max:<input id="counter-high" class="counter" type="text" />
            </div>
        </div>
        <div class="col-sm-4 filter-columns-alt">
            <input type='text' id='filter' /> <button id='btnFilter'>Go</button>
        </div>
    </div>

    <div id="body">


        <table>
            <thead>
                <tr id="ProductID" class="first">
                    <th>NAME</th>
                    <th>INPUT</th>
                    <th>MAIN VALUE</th>
                    <th>DIFF</th>
                    <th>DIFF /100</th>
                    <th>MV /100</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

</body>

关于javascript - 使用困惑的查询(HTML 表)从 JSON url 添加数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41510656/

文章推荐： javascript - 如何使用正则表达式替换标签之间的文本

文章推荐： javascript - 获取数据的正确方法 - React

文章推荐： JavaScript 恶意软件。如何研究加密函数？

文章推荐： Javascript 设置标题换行

json - mongoexport - JSON 查询问题(扩展 JSON - JSON 输入无效)
最近开始学习MongoDB。今天老师教了我们 mongoexport 命令。在练习时，我遇到了一个典型的问题，包括教练在内的其他同学都没有遇到过。我在我的 Windows 10 机器上使用 Mongo
json - 如何将 JSON Schema 链接到我的 JSON 以验证 JSON？
我是 JSON Schema 的新手，读过什么是 JSON Schema 等等。但我不知道如何将 JSON Schema 链接到 JSON 以针对该 JSON Schema 进行验证。谁能解释一下？
json - 仅使用 json 在另一个 json 文件中包含一个 json 文件
在 xml 中，我可以在另一个 xml 文件中包含一个文件并使用它。如果您的软件从 xml 获取配置文件但没有任何方法来分离配置，如 apache/ngnix(nginx.conf - site-av
json - 如何反序列化包含具有更多 JSON 的字符串的 JSON？
我有一个 JSON 对象，其中包含一个本身是 JSON 对象的字符串。我如何反序列化它？我希望能够做类似的事情: #[derive(Deserialize)] struct B { c: S
json - Play Json 读取嵌套泛型序列化 Json
考虑以下 JSON { "a": "{\"b\": 12, \"c\": \"test\"}" } 我想定义一个泛型读取 Reads[Outer[T]]对于这种序列化的 Json import
json - 从 JSON 模式生成示例 JSON
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 11 个月前关闭。 Improve
json - DynamoDB JSON 还是标准 JSON？
我的旧项目在 MySQL 中有 Standard JSON 格式的数据。对于我在 JS (Node.js) 和 DynamoDB 中的全新项目，关于 Standard JSON格式: 是否建议将其转
json - JSON 值是有效的 JSON 吗？
JSON 值字符串、数字、true、false、null 是否是有效的 JSON？即，是 true 一个有效的 JSON 文档？还是必须是数组/对象？一些验证器接受这个(例如 http://jso
json - 如何编码嵌入在 JSON 中的 JSON
我有一个 JSON 字符串，其中一个字段是文本字段。这个文本字段可以包含用户在 UI 中输入的文本，如果他们输入的文本是 JSON 文本，也许是为了说明一些编码，我需要对他们的文本进行编码，以便它不会
json - 使用加号序列化 JSON 会导致无效的 JSON
我正在通过 IBM MQ 调用处理数据，当由 ColdFusion 10 (10,0,11,285437) 序列化时，0 将作为 +0.0 返回，它会导致无效的 JSON并且无法反序列化。 stPol
json - 在 json 中没有嵌套数组的情况下哈希到 json
我正在从三个数组中生成一个散列，然后尝试构建一个 json。我通过 json object has array 成功了。 require 'json' A = [['A1', 'A2', 'A3'],
json - 根据 JSON 中的字段有条件地解码 JSON
我从 API 接收 JSON，响应可以是 30 种类型之一。每种类型都有一组唯一的字段，但所有响应都有一个字段 type 说明它是哪种类型。我的方法是使用serde .我为每种响应类型创建一个结构并
json - 为什么我下载的 JSON 文件不再是 JSON？
我正在下载一个 JSON 文件，我已将其检查为带有“https://jsonlint.com”的有效 JSON 到文档目录。然后我打开文件并再次检查，结果显示为无效的 JSON。这怎么可能？？？？这是
json - 尝试解析 JSON 并创建提取的 JSON
我正在尝试根据从 API 接收到的数据动态创建一个 JSON 对象。收到的示例数据:将数据解码到下面给出的 CiItems 结构中 { "class_name": "test", "
json - 从 JSON 字符串值解析 JSON
我想从字符串转换为对象。来自 {"key1": "{\n \"key2\": \"value2\",\n \"key3\": {\n \"key4\": \"value4\"\n }\n
json - 将扁平化的 json 转换为嵌套的 json
目前我正在使用以下代码将嵌套的 json 转换为扁平化的 json: import ( "fmt" "github.com/nytlabs/gojsonexplode" ) func
json - Go:用一组 json 标签解码 json，并编码为另一组不同的 json 标签
我有一个使用来自第三方 API 的数据的应用程序。我需要将 json 解码为一个结构，这需要该结构具有“传入”json 字段的 json 标签。传出的 json 字段具有不同的命名约定，因此我需要不同
json - 将 JSON 值限制为其他 JSON 对象的名称
我想使用 JSON 架构来验证某些值。我有两个对象，称它们为 trackedItems 和 trackedItemGroups。 trackedItemGroups 是组名称和 trackedItem
json - Spark JSON 将 JSON 中完整的字段读取到案例类中
考虑以下案例类模式， case class Y (a: String, b: String) case class X (dummy: String, b: Y) 字段b是可选的，我的一些数据集没有字
json - 如何从 json 对象中获取格式化的 json 字符串？
我正在存储 cat ~/path/to/file/blah | 的输出jq tojson 在一个变量中，稍后在带有 JSON 内容的 curl POST 中使用。它运作良好，但它删除了所有换行符。我知

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 使用困惑的查询(HTML 表)从 JSON url 添加数据