Add multiple Values to Table using Jquery-CodePudding

Here the Values for Tables comes from Database with the help of Ajax .How to Store multiple Values to Table row using jquery or Javascript

<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>

the values comes from 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'

how to add multiple values to table using Jquery .How to add values to

CodePudding user response：

You would have to do something like this:

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

This will loop over the data from your ajax success, and append the data it into your table

Demo

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>