我正在使用此计算器,并且当用户选择一种类型时,应该出现一个小表以从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] 删除。
我来说两句