Question

我有功能。它的工作原理和表格都很好。

function fillTable(data){
  t.innerHTML="";

  for (let i=0; i<data.length; i++){
    t.innerHTML+='<tr class="rowRes"><td class="id">'+data[i]["id"]+'</td><td class="firstName">'+data[i]["firstName"]+'</td><td class="lastName">'+data[i]["lastName"]+'</td><td class="email">'+data[i]["email"]+'</td><td class="phone">'+data[i]["phone"]+'</td></tr>';
  }
  getClickTable ();
}

但是当我试图以简短的形式写它时。它将所有数据填入一列。

function fillTable(data){
  t.innerHTML="";

  for (let i=0; i<data.length; i++){
    t.innerHTML+='<tr class="rowRes">'
    var mass=["id", "firstName", "lastName", "email", "phone"];
      for (let j=0; j<mass.length; j++){
        t.innerHTML+='<td class='+mass[j]+'>'+data[i][mass[j]]+ '</td>';
  }

    t.innerHTML+='</tr>';
  }
  getClickTable ();
}

出了什么问题？为什么它将每个单元格放在不同的行中？

Answer 1

当您使用.innerHTML属性直接设置HTML时，您遇到了问题，因此现代浏览器正试图通过部分HTML来解决问题。

使用变量生成HTML并稍后进行设置。

function fillTable(data) {
    var str = "";
    for (let i = 0; i < data.length; i++) {
        str += '<tr class="rowRes">'
        var mass = ["id", "firstName", "lastName", "email", "phone"];
        for (let j = 0; j < mass.length; j++) {
            str += '<td class=' + mass[j] + '>' + data[i][mass[j]] + '</td>';
        }
        str += '</tr>';
    }
    t.innerHTML = str;
    getClickTable();
}

Answer 2

这有一个问题。

[mass [j]]此字段返回未定义的值。

javascript表以不同方式填写

2 个答案: