Question

我想使用html和js创建动态表。我把下面的代码和它无法正常工作。我可以通过多种方式做到这一点。但我想知道为什么这段代码不起作用。

这是我的代码

let data = [{
    id: 1,
    name: 'ssss'
  },
  {
    id: 2,
    name: 'bbbb'
  }
]
document.getElementById("test").innerHTML = `<table><tr><th>S.no</th><th>title</th></tr>`;

data.forEach(item => {
  document.getElementById("test").innerHTML += "<tr><td>" + item.id + "</td><td>" + item.name + "</td></tr>";
  console.log(item);
});

console.log("ssss");
document.getElementById("test").innerHTML += "</table>";

<p id="test">
</p>

我得到了如下输出

 S.no   title
 1ssss2bbbb

我的预期输出是

 S.no   title
 1      ssss
 2      bbbb

Answer 1

从一开始就将</table>放入HTML字符串中。

test是<p>元素，而不是table元素。请改为选择table元素，它是<p>的直接后代。

如果您自己感到困惑，如果您首先将元素提取到描述性变量名称中，它会更清晰，如下所示：

＆＃13;

let data = [{
    id: 1,
    name: 'ssss'
  },
  {
    id: 2,
    name: 'bbbb'
  }
]
const p = document.getElementById("test");
p.innerHTML = `<table><tr><th>S.no</th><th>title</th></tr></table>`;
const table = p.children[0];

data.forEach(item => {
  table.innerHTML += "<tr><td>" + item.id + "</td><td>" + item.name + "</td></tr>";
});

＆＃13;

<p id="test">
</p>

＆＃13;

Answer 2

尝试在完成所有工作后设置表：

＆＃13;

let data = [{
    id: 1,
    name: 'ssss'
  },
  {
    id: 2,
    name: 'bbbb'
  }
]
var x = `<table><tr><th>S.no</th><th>title</th></tr>`;

data.forEach(item => {
  x += "<tr><td>" + item.id + "</td><td>" + item.name + "</td></tr>";
});

x += "</table>";
document.getElementById("test").innerHTML = x
console.log(x)

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <p id="test">
  </p>
</body>

</html>

＆＃13;

Answer 3

尝试为表格的<tbody>部分设置ID，并将innerHTML设置为js，如下所示：

＆＃13;

let data = [{
    id: 1,
    name: 'ssss'
  },
  {
    id: 2,
    name: 'bbbb'
  }
]
document.getElementById("test").innerHTML = `<table><tr><th>S.no</th><th>title</th></tr><tbody id="tableBody"></tbody></table>`;

data.forEach(item => {
  document.getElementById("tableBody").innerHTML += "<tr><td>" + item.id + "</td><td>" + item.name + "</td></tr>";
  console.log(item);
});

console.log("ssss");
document.getElementById("test").innerHTML += "</table>";

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <p id="test" />

</body>

</html>

＆＃13;

Answer 4

我稍微修改了你的方法：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>
    <p id="test">

      </table>
    </p>
    <script>

 let data = [{
     id: 1,
     name: 'ssss'
   },
   {
     id: 2,
     name: 'bbbb'
   }
 ]
 var table = document.createElement('table');
 var thead = document.createElement('thead');
 var tbody = document.createElement('tbody');
 var tr = document.createElement('tr');
 var td = document.createElement('td');
 var columns = ['S.No','Title'];
 var tcol = [];
 
 //creating the header while assuming all the headers are present in 1st row
 Object.keys(data[0]).forEach(col=>{
 tcol.push(col);
 });
 for(var i=0;i<columns.length;i++)
 {
    var th = document.createElement('th');
   th.innerHTML = columns[i];
   tr.appendChild(th);
 }
 
  
 thead.appendChild(tr);
 //appending the created headers to the table object
 table.appendChild(thead);

 //creating the body
 data.forEach(item => {
   tr = document.createElement('tr');
   for (var i = 0; i < tcol.length; i++) {
   	var td = document.createElement('td');
     td.innerHTML = item[tcol[i]];
     tr.appendChild(td);
   }
   //appending the created row to the table body 
   tbody.appendChild(tr);
 });
 table.appendChild(tbody);

 //finally putting the table's html to your desired div 
 document.getElementById("test").innerHTML = table.outerHTML;

    </script>
  </body>

</html>

我已经假设如果没有尝试将列作为单独的实体传递，那么第一行将主要包含一列。

需要澄清使用js

4 个答案: