使用 Jquery 将多个值添加到 Table

Question

此处 Table 的值在 Ajax 的帮助下来自数据库。如何使用 jquery 或 [=22 将多个值存储到 Table 行=]

<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table id='company-details'>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>--</td>
    <td>---</td>
    <td>---</td>
  </tr>

</table>

</body>
</html>

数值来自ajax

0:
Company: 'Alfreds Futterkiste'
Contact: 'Maria Anders'
Country: 'Germany'
1:
Company: 'Centro Comercial Moctezuma'
Contact: 'Francisco Chang'
Country: 'Mexico'
2:
Company: 'Ernst Handel'
Contact: 'Roland Mendel'
Country: 'Austria'

如何使用 Jquery 将多个值添加到 table。如何将值添加到

Answer 1

你必须这样做：

$.each(datafromAjax,function() {
  $('#company-details tbody').append(`<tr><td>${this.Company}</td><td>${this.Contact}</td><td>${this.Country}</td></tr>`)
})

这将遍历您 ajax 成功的数据，并将数据附加到您的 table

演示

var datafromAjax = [{
  Company: 'Alfreds Futterkiste',
  Contact: 'Maria Anders',
  Country: 'Germany',
}, {
  Company: 'Centro Comercial Moctezuma',
  Contact: 'Francisco Chang',
  Country: 'Mexico',
}, {
  Company: 'Ernst Handel',
  Contact: 'Roland Mendel',
  Country: 'Austria',
}]

$.each(datafromAjax,function() {
  $('#company-details tbody').append(`<tr><td>${this.Company}</td><td>${this.Contact}</td><td>${this.Country}</td></tr>`)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id='company-details'>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>--</td>
    <td>---</td>
    <td>---</td>
  </tr>

</table>

使用 Jquery 将多个值添加到 Table

Add multiple Values to Table using Jquery

javascript

ajax

jquery

laravel