在表格中显示数组数据

Question

我有一个带有 id="result" 的 div，我想在这个 div 标记中显示我的数据。

如何追加此表数据。

我不明白table data tag table is in the string 所以它是如何工作的

function displayAddress() {
  if (flag == 0) {
    tabledata = "<table style='position: fixed; background-color:lightgrey; border: 1px solid black; border-collapse: collapse;  margin-top: 25px;' border = '1'><tr><th>Name</th><th>Type</th><th>Address</th><th>Email</th><th>Mobile</th><th>Location</th></tr>";
  }
  for (i = 0; i < dataArray.length; i++) {
    var tempname = dataArray[i].Name;
    var temptype = dataArray[i].Type;
    var tempaddress = dataArray[i].Address;
    var tempemail = dataArray[i].Email;
    var tempmobile = dataArray[i].Mobile;
    var templocation = dataArray[i].Location;
    //Please fill the required code to store the values in tabledata.
  }

  console.log(tabledata);
  if (flag == 0) {
    //Please fill the required code to store the table data in result.
    document.getElementById("name").value = "";
    document.getElementsByName("type").checked = false;
    document.getElementById("address").value = "";
    document.getElementById("email").value = "";
    document.getElementById("mobile").value = "";
    document.getElementById("location").value = "";
  }
  count = 0;
}

Answer 1

这是一种方式

const dataArray = [{
    "Name": "Joe",
    "Type": "Contractor",
    "Address": "Address 1",
    "Email": "Email@email.com",
    "Mobile": "0123456789",
    "Location": "At home"
  },
  {
    "Name": "Jane",
    "Type": "Contractor",
    "Address": "Address 2",
    "Email": "Email@email.com",
    "Mobile": "1234567890",
    "Location": "At home"
  }

];
const tb = document.getElementById("tb");
let tr = [];
dataArray.forEach(item => {
  tr.push('<tr><td>' + item.Name + '</td>')
  tr.push('<td>' + item.Type + '</td>')
  tr.push('<td>' + item.Address + '</td>')
  tr.push('<td>' + item.Email + '</td>')
  tr.push('<td>' + item.Mobile + '</td>')
  tr.push('<td>' + item.Location + '</td></tr>')
})
tb.innerHTML = tr.join("");
document.getElementById("result").classList.remove("hide"); // show

#table1 {
  position: fixed;
  background-color: lightgrey;
  border: 1px solid black;
  border-collapse: collapse;
  margin-top: 25px;
}

#table1 tr td {
  border: 1px solid black;
}
.hide  { display:none; }

<div id="result" class="hide">
  <table id="table1">
    <thead>
      <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Address</th>
        <th>Email</th>
        <th>Mobile</th>
        <th>Location</th>
      </tr>
    </thead>
    <tbody id="tb"></tbody>
  </table>
</div>

使用模板文字的替代方法

dataArray.forEach(item => {
  tr.push(`<tr>
             <td>${item.Name}</td>
             <td>${item.Type}</td>
             <td>${item.Address}</td>
             <td>${item.Email}</td>
             <td>${item.Mobile}</td>
             <td>${item.Location}</td>
           </tr>`);
})

Answer 2

就我自己而言，我这样做[非常短]。

所有文档都在这里 -> https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement

const resultDiv = document.getElementById('result')
  ,   myTable   = resultDiv.appendChild(document.createElement('table'))      // create the TABLE
  ,   rowList = 
        [ { lib:'Names',   key: 'Name'    }, { lib:'Types',     key:'Type'  } 
        , { lib:'Address', key: 'Address' }, { lib:'eMails',    key:'Email' } 
        , { lib:'phone',   key: 'Mobile'  }, { lib:'Locations', key:'Location' } 
        ];
// sample data  
const dataArray = 
  [ { Name: "Joe", Type: "Contractor", Address: "Address 1", Email: "Email_1@email.com", Mobile: "0123456789", Location: "At home"} 
  , { Name: "Jane", Type: "Contractor", Address: "Address 2", Email: "Email_2@email.com", Mobile: "0987654321", Location: "someWhere"} 
  ] 
;
dataArray.forEach(item=>
  {
  let newRow = myTable.insertRow()
  rowList.forEach(rowName=>newRow.insertCell().textContent = item[rowName.key])
  })

// make header part at last
let theHeader = myTable.createTHead().insertRow()
rowList.forEach(rowName=>theHeader.insertCell().textContent = rowName.lib)

/* cosmetic part */

table {
  border-collapse: collapse;
  margin-top: 25px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10px;
}
thead {
  background-color: aquamarine;
}
tbody {
  background-color: #b4c5d8;
}
td {
  border: 1px solid grey;
  padding: .3em .7em;
}

<div id="result"></div>

Answer 3

有两种方法，简单版是

document.getElementById("element").innerHTML = yourArray[0]
document.getElementById("element").innerHTML = yourArray[1]
document.getElementById("element").innerHTML = yourArray[2]
...

第二种方式是map()方法

yourArray.map(item => {
  elements.innerHTML = item
});

如果你使用框架（如 Vue、React），第二种方式更容易

不工作试试这个

var email = yourArray[0]
var password  = yourArray[1]
var table = "<table><tr> <td>" + email + "</td><td>" + password "</td></tr></table>