Question

1。我试图通过JS创建一个表格，但是我遇到了一个小问题，我试图代替？，ID，所以它为我填写了ID，我只写了id，但是我不知道该如何提及或接受它。

2。我尝试将其放在“”和“”中。

   var Applications =

[
    {cluster: 'WV', ID: 'UID8', Name: ' (BV)'},
    {cluster: 'WV', ID: 'UDWD', Name: 'AWS'},
    {cluster: 'WV', ID: 'UAD5', Name: 'AMS'},
    {cluster: 'WV', ID: 'U548', Name: 'COine'},
    {cluster: 'WV', ID: 'UADW', Name: 'GAine'},
    {cluster: 'WV', ID: 'UADA', Name: 'EP'},
    {cluster: 'WV', ID: 'UAHD', Name: 'ES'},
    {cluster: 'WV', ID: 'UHH5', Name: 'GTR'},
    {cluster: 'WV', ID: 'UHHA', Name: 'SPA '},
];
var txt= "";
Applications.forEach(table);
function table(item, index, arrays) {

    txt =  txt + "<tr><td>?????</td></tr>";

}
document.getElementById("tbl").innerHTML = txt;

Answer 1

您可以使用模板字符串在字符串中插入变量。见下文

template literals( strings )

   var applications = [{
         cluster: 'WV',
         ID: 'UID8',
         Name: ' (BV)'
       },
       {
         cluster: 'WV',
         ID: 'UDWD',
         Name: 'AWS'
       },
       {
         cluster: 'WV',
         ID: 'UAD5',
         Name: 'AMS'
       },
       {
         cluster: 'WV',
         ID: 'U548',
         Name: 'COine'
       },
       {
         cluster: 'WV',
         ID: 'UADW',
         Name: 'GAine'
       },
       {
         cluster: 'WV',
         ID: 'UADA',
         Name: 'EP'
       },
       {
         cluster: 'WV',
         ID: 'UAHD',
         Name: 'ES'
       },
       {
         cluster: 'WV',
         ID: 'UHH5',
         Name: 'GTR'
       },
       {
         cluster: 'WV',
         ID: 'UHHA',
         Name: 'SPA '
       },
     ];
var tableHtml ='';
applications.forEach(function(item,index) {
  tableHtml = tableHtml + `<tr><td>${item.ID}</td></tr>`;
})

document.getElementById("tbl").innerHTML = tableHtml;

<table id="tbl"></table>

Answer 2

您还可以像这样生成整个表，

<table border=1 id="tbl"></table>
<script>
   var Applications =

[
    {cluster: 'WV', ID: 'UID8', Name: ' (BV)'},
    {cluster: 'WV', ID: 'UDWD', Name: 'AWS'},
    {cluster: 'WV', ID: 'UAD5', Name: 'AMS'},
    {cluster: 'WV', ID: 'U548', Name: 'COine'},
    {cluster: 'WV', ID: 'UADW', Name: 'GAine'},
    {cluster: 'WV', ID: 'UADA', Name: 'EP'},
    {cluster: 'WV', ID: 'UAHD', Name: 'ES'},
    {cluster: 'WV', ID: 'UHH5', Name: 'GTR'},
    {cluster: 'WV', ID: 'UHHA', Name: 'SPA '},
];
var txt= "";

txt=txt+"<tr>";
        Object.keys(Applications[0]).forEach((key)=>{
  txt =  txt + "<td>"+key+"</td>";
});
  txt=txt+"</tr>";
Applications.forEach(table);
function table(item, index, arrays) {
txt=txt+"<tr>";
        Object.keys(item).forEach((key)=>{
  txt =  txt + "<td>"+item[key]+"</td>";
});
  txt=txt+"</tr>";

}
document.getElementById("tbl").innerHTML = txt;
</script>

Answer 3

当您从table()调用forEach()时，您会在forEach的每次迭代中遍历Applications中的每个对象。您可以使用参数item访问函数内部的对象。由于id是一个嵌套值，因此您可以像item.ID一样访问它：

var Applications = [
    {cluster: 'WV', ID: 'UID8', Name: ' (BV)'},
    {cluster: 'WV', ID: 'UDWD', Name: 'AWS'},
    {cluster: 'WV', ID: 'UAD5', Name: 'AMS'},
    {cluster: 'WV', ID: 'U548', Name: 'COine'},
    {cluster: 'WV', ID: 'UADW', Name: 'GAine'},
    {cluster: 'WV', ID: 'UADA', Name: 'EP'},
    {cluster: 'WV', ID: 'UAHD', Name: 'ES'},
    {cluster: 'WV', ID: 'UHH5', Name: 'GTR'},
    {cluster: 'WV', ID: 'UHHA', Name: 'SPA '},
];

var txt = "";

Applications.forEach(table);

function table(item, index, arrays) {

  txt = txt + "<tr><td>" + item.ID + "</td></tr>";

}

document.getElementById("tbl").innerHTML = txt;

<table id="tbl"></table>

您可以使用reduce简化代码：

var Applications = [
    {cluster: 'WV', ID: 'UID8', Name: ' (BV)'},
    {cluster: 'WV', ID: 'UDWD', Name: 'AWS'},
    {cluster: 'WV', ID: 'UAD5', Name: 'AMS'},
    {cluster: 'WV', ID: 'U548', Name: 'COine'},
    {cluster: 'WV', ID: 'UADW', Name: 'GAine'},
    {cluster: 'WV', ID: 'UADA', Name: 'EP'},
    {cluster: 'WV', ID: 'UAHD', Name: 'ES'},
    {cluster: 'WV', ID: 'UHH5', Name: 'GTR'},
    {cluster: 'WV', ID: 'UHHA', Name: 'SPA '},
];

var txt = Applications.reduce((acc, item) => acc + "<tr><td>" + item.ID + "</td></tr>", '');

document.getElementById("tbl").innerHTML = txt;

<table id="tbl"></table>

Answer 4

您可以使用map的{{1}}方法，如下所示：

array

Answer 5

这是我猜想在之后添加新列的最佳解决方案。所有答案的坦克大有帮助。

function generatetable(item, index, arrays) {
        var columns = "";

        columns = columns + "<td onclick='testfn(\"" + index + "\", this)'>" + item.UAID + "</td>";
        columns = columns + "<td>" + item.Name + "</td>";
        columns = columns + "<td>" + "<a href='https://echo.1dc.com/appmap/" + item.UAID + "/ApplicationDetails/'>Appmap</a>" + "</td>";

        txt = txt + "<tr>" + columns + "</tr>";
}

如何在JS表中选择元素？

5 个答案: