时间戳

首页 > 解决方案 > 无法从 JS 中的 JSON 对象生成 html 表

javascript - 无法从 JS 中的 JSON 对象生成 html 表

问题描述

我正在尝试从 javascript 上的数组生成一个 html 表，但它似乎不起作用。问题是什么 ？

这是源文件顺便说一句：“ https://ufile.io/18nlj ”

例如，它应该如下所示：https ://ibb.co/dc7VSk2 （左一）

var livres = {

    b0124 : {auteur: 'B.Y.',  titre: 'Connectique',            prix : 5.20},
    b0254 : {auteur: 'L.Ch.', titre: 'Programmation C',        prix : 4.75},
    b0334 : {auteur: 'L.Ch.', titre: 'JavaScript',             prix : 6.40},
    b0250 : {auteur: 'D.A.',  titre: 'Mathématiques',          prix : 6.10},
    b0604 : {auteur: 'V.V.',  titre: 'Objets',                 prix : 4.95},
    b0025 : {auteur: 'D.M.',  titre: 'Electricité',            prix : 7.15},
    b0099 : {auteur: 'D.M.',  titre: 'Phénomènes Périodiques', prix : 6.95},
    b0023 : {auteur: 'V.MN.', titre: 'Programmation Java',     prix : 5.75},
    b0100 : {auteur: 'D.Y.',  titre: 'Bases de Données',       prix : 6.35},
    b0147 : {auteur: 'V.V.',  titre: 'Traitement de Signal',   prix : 4.85},
    b0004 : {auteur: 'B.W.',  titre: 'Sécurité',               prix : 5.55},
    b0074 : {auteur: 'B.Y.',  titre: 'Electronique digitale',  prix : 4.35},
    b0257 : {auteur: 'D.Y.',  titre: 'Programmation Multimedia', prix : 6.00}

}

function afficherCatalogue(livres){ 
  var ligne;
    for(var i in livres) {  
      ligne = '<tr>';
      ligne += '<td class=ref>' + livres[i] + '</td>';  
      ligne += '<td class=aut>' + livres[i].auteur + '</td>';  
      ligne += '<td class=tit>' + livres[i].titre + '</td>';  
      ligne += '<td class=prx>' + livres[i].prix + '</td>';  
      ligne += '<td class=ach>' + buttonhtml ? + '</td>';
      ligne += '</tr>';
        function addElem(id, i){
            
            document.getElementById('tbc').innerHTML += ligne;
        }  
    }
  }
<body onLoad="afficherCatalogue(livres);">
  <div id=catal> <!-- left block -->
    <table>
      <caption><span>Catalogue de la librairie</span></caption>    
      <thead>
        <tr>
          <th class=ref>ref</th>
          <th class=aut>auteur</th>
          <th class=tit>titre</th>
          <th class=prx>prix (€)</th>
          <th class=ach> </th>
        </tr>
      </thead>
      <tbody id=tbc></tbody>
    </table>

标签： javascripthtmlarrays

解决方案

您的函数有一个永远不会被调用afficherCatalogue的嵌套函数 ( )。addElem删除该功能，它应该可以正常工作：

function afficherCatalogue(livres){ 
  var ligne;
  for(var i in livres) {  
    ligne = '<tr>';
    ligne += '<td class=ref>' + livres[i] + '</td>';  
    ligne += '<td class=aut>' + livres[i].auteur + '</td>';  
    ligne += '<td class=tit>' + livres[i].titre + '</td>';  
    ligne += '<td class=prx>' + livres[i].prix + '</td>';  
    ligne += '<td class=ach>' + buttonhtml ? + '</td>';
    ligne += '</tr>';
    document.getElementById('tbc').innerHTML += ligne;
  }
}

但是，在循环中更改 DOM 并不是一个好主意——这可能会成为主要的性能问题。最好使用片段并一次更新最终结果：

function createTd(classname, children) {
  var td = document.createElement("td");
  td.className = classname;
  td.appendChild(document.createTextNode(children));
  return td;
}

function afficherCatalogue(data) {
  var frag = document.createDocumentFragment();

  for (var i in data) {
    var tr = document.createElement("tr");
    tr.appendChild(createTd("ref", i));
    tr.appendChild(createTd("aut", data[i].auteur));
    tr.appendChild(createTd("tit", data[i].titre));
    tr.appendChild(createTd("prx", data[i].prix));
    // it's not clear what this is supposed to be
    tr.appendChild(createTd("ach", "action"));
    frag.appendChild(tr);
  }

  document.getElementById("tbc").appendChild(frag);
}

这是一个带有工作示例的代码框。

推荐阅读