如何用json数据填充表

炼金术士

我正在使用此计算器,并且当用户选择一种类型时,应该出现一个小表以从tha表中选择一种类型,该表应填充json数据但不起作用

这是我的代码

document.addEventListener("DOMContentLoaded", get_json_data, false);

function get_json_data() {
    var json_url = 'example.json';
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var data = JSON.parse(this.responseText);
            append_json(data);
        }
    }
    xmlhttp.open("POST", json_url, true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send();
}

function append_json(data) {
    var table = document.getElementById('gable');
    data.forEach(function(object) {
        var tbody = document.createElement('tbody');
        tbody.innerHTML =
            '<tr>' +
            '<td > <input type="radio" value ="' + object.RendementDuPanneau + '" name="choice" class="rad" /> </td>' +
            '<td>' + object.Fournisseur + '</td>' +
            '<td>' + object.Modele + '</td>' +
            '<td>' + object.PuissanceMaximale + '</td>' +
            '<td>' + object.RendementDuPanneau + '</td>' + '</tr>';
        table.appendChild(tbody);
    });
    var elements = document.getElementsByTagName('tr');
    for (var i = 0; i < elements.length; i++) {

        (elements)[i].addEventListener("click", function() {
            const rb = this.querySelector('input[name="choice"]');
            rb.checked = true;

            let selectedValue = rb.value;
            alert(selectedValue);
        });
    }
}

json文件数据看起来像

[{"Fournisseur":"Jinko Solar","Modèle":"JKM270PP-60","PuissanceMaximale":270,"RendementDuPanneau":"16,50%"},{"Fournisseur":"Jinko Solar","Modèle":"JKM275PP-60","PuissanceMaximale":275,"RendementDuPanneau":"16,80%"},{"Fournisseur":"Jinko Solar","Modèle":"JKM280PP-60","PuissanceMaximale":280,"RendementDuPanneau":"17,11%"},{"Fournisseur":"Jinko Solar","Modèle":"JKM285PP-60","PuissanceMaximale":285,"RendementDuPanneau":"17,41%"},{"Fournisseur":"Jinko Solar","Modèle":"JKM320PP-72","PuissanceMaximale":320,"RendementDuPanneau":"16,49%"},{"Fournisseur":"Jinko Solar","Modèle":"JKM325PP-72","PuissanceMaximale":325,"RendementDuPanneau":"16,75%"},{"Fournisseur":"Jinko Solar","Modèle":"JKM330PP-72","PuissanceMaximale":330,"RendementDuPanneau":"17,01%"},{"Fournisseur":"Jinko Solar","Modèle":"JKM335PP-72","PuissanceMaximale":335,"RendementDuPanneau":"17,26%"}]

这看起来如何 结果

这应该是什么样子 喜欢

彼得·卡

以下内容的输出为零表示没有id的元素gable

console.log( $('#gable').length );

请确认表格具有此ID,否则请添加ID属性,因此:

id="gable"

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何用数据表中的关系填充对象?

来自分类Dev

如何用数据库的结果填充隐藏的HTML表?

来自分类Dev

如何用角的json数组值填充html表?

来自分类Java

如何用XML或JSON数据填充ListView(在Android中)?

来自分类Dev

如何用json数据填充v-text-field

来自分类Dev

如何用某些数据的所有可能实例填充数据表?

来自分类Dev

如何用JSON数据类型列创建表

来自分类Dev

如何用基本表填充JScrollPane

来自分类Dev

如何用多维数组填充表

来自分类Dev

我如何用JQuery填充HTML表

来自分类Dev

如何使用jQuery过滤表(从JSON文件填充表数据)?

来自分类Java

如何用列表数据填充微调器?

来自分类Dev

如何用异步获取的数据填充QTableView?

来自分类Dev

如何用状态数据填充输入字段?

来自分类Dev

如何用数组数据填充直方图?

来自分类Dev

如何用API数据填充SliverList

来自分类Dev

如何用Mysql数据填充Bootstrap布局?

来自分类Dev

如何用数据填充多个文件?

来自分类Dev

如何用随机数据填充文件?

来自分类Dev

如何用我的MYSQL数据库中的数据填充JSON数组?

来自分类Dev

如何用另一个表中的数据(计算得出的)填充SQL列

来自分类Dev

如何用excel中单独工作表中的数据填充单元格?

来自分类Dev

如何用JSON数组填充UIPickerView?

来自分类Dev

在表中填充json数据

来自分类Dev

如何修复不在HTML表中填充的JSON数据

来自分类Dev

如何用片段内的数据库数据填充listview?

来自分类Dev

如何用数据库数据随机填充片段

来自分类Java

如何用数据库填充JTable中的数据?

来自分类Dev

如何用数据预填充Realm数据库?

Related 相关文章

热门标签

归档