Question

我在代码中找不到失败的原因，为什么secound for loop不起作用。请帮我。

我试图修改for代码。我试图看看它是否可以在没有secound循环的情况下工作，而且确实可以。有什么主意吗？

//--js file with the object array which is loaded in the 2nd file--
let inhaltsverzeichnis_beispiele = [ 
  { blatt:'1' 
    ,name: ['Übungszettel 1 [2013]', 'Übungszettel 1 [2014]', 'Übungszettel 1 [2018]']
    ,a_href: ['Übungsbeispiele_1_2013','Übungsbeispiele_1_2014','Übungsbeispiele_1_2018']
    ,fach: ['Physik Integral- und Differentionrechnungen','Physik Integral- und Differentionrechnungen','Informatik AnalysisT1']
   },
 ]

//----2nd file code segment
document.write('<button class="buttn" onclick="myFunction(\'index\')" style="color:red;">Inhaltsverzeichnis</button><div id="index" style="display:none;"><ul style="list-style: none;">');
  for (NR_i = 0; NR_i < inhaltsverzeichnis_beispiele.length; NR_i++) {
    document.write(
      '<li>'
        + '<table>'
        +   '<tr>'
        +     '<td style="width:30px">' 
        +        inhaltsverzeichnis_beispiele[NR_i].blatt 
        +     '</td>'
      );
      //---- That loop doesnt work =/
      for (NR_i2 = 0; NR_i2 < inhaltsverzeichnis_beispiele[Nr_i].name[NR_i2].length; NR_i2++) { 
        document.write(
          +  '<td>' 
          +    '<a href="#'
          +      inhaltsverzeichnis_beispiele[NR_i].a_href[NR_i2]
          +    '" >' 
          +      inhaltsverzeichnis_beispiele[NR_i].name[NR_i2]
          +    '</a>'
          +  '</td>'
        )
      }
      //----- That loop doesnt work =/ End
      document.write(
        +    '</tr>'
        +  '</table>'
        +'</li>' 
      );
    };  
 document.write('</ul></div>');
 //----2nd file code segment End

Answer 1

您可以采用一些数组方法来迭代数据并构建新元素并将其添加到正文（或网页的任何其他元素）中。

var inhaltsverzeichnis_beispiele = [{ blatt: '1', name: ['Übungszettel 1 [2013]', 'Übungszettel 1 [2014]', 'Übungszettel 1 [2018]'], a_href: ['Übungsbeispiele_1_2013', 'Übungsbeispiele_1_2014', 'Übungsbeispiele_1_2018'], fach: ['Physik Integral- und Differentionrechnungen', 'Physik Integral- und Differentionrechnungen', 'Informatik AnalysisT1'] }],
    ul = document.createElement('ul');

inhaltsverzeichnis_beispiele.forEach(({ blatt, name, a_href }) => {
    var li = document.createElement('li'),
        table = document.createElement('table'),
        tr = document.createElement('tr'),
        td = document.createElement('td');

    td.style = 'width:30px;';
    td.appendChild(document.createTextNode(blatt));
    tr.appendChild(td);
    name.forEach((value, i) => {
        var td = document.createElement('td'),
            a = document.createElement('a');

        a.href = a_href[i];
        a.appendChild(document.createTextNode(value));
        td.appendChild(a);
        tr.appendChild(td);
    });
    table.appendChild(tr);
    li.appendChild(table);
    ul.appendChild(li);
});

document.body.appendChild(ul);

Answer 2

我建议您使用es6 features，然后将代码重做为类似的内容。

这结合使用template literals，Array#map和Array#join

//--js file with the object array which is loaded in the 2nd file--
const inhaltsverzeichnis_beispiele = [{
  blatt: '1',
  name: ['Übungszettel 1 [2013]', 'Übungszettel 1 [2014]', 'Übungszettel 1 [2018]'],
  a_href: ['Übungsbeispiele_1_2013', 'Übungsbeispiele_1_2014', 'Übungsbeispiele_1_2018'],
  fach: ['Physik Integral- und Differentionrechnungen', 'Physik Integral- und Differentionrechnungen', 'Informatik AnalysisT1']
}];

const container = document.getElementById("container");
const buttonContainer = document.getElementById("button-container");
buttonContainer.innerHTML = `<button class="buttn" onclick="myFunction('index')" style="color:red;">Inhaltsverzeichnis</button>`

function generateTable(data){
  const res = [`<td style="width:30px">${data.blatt}</td>`];
  for(let i = 0; i < data.name.length; i++){
    const name = data.name[i];
    const href = data.a_href[i];
    res.push(`<td><a href="#${href}">${name}</a></td>`);
  }
  return `<table><tr>${res.join("")}</tr></table>`
}

function generateList(data){
  const res = data.map(item=>{
     const table = generateTable(item);
     return `<li>${table}</li>`;
  }).join("");
  
  return `<ul>${res}</ul>`
}

container.innerHTML = generateList(inhaltsverzeichnis_beispiele);

<div id="button-container">

</div>
<div id="container">

</div>

用于document.write +的函数递归形式的失败代码

2 个答案: