Add multiple Values to Table using Jquery

Question

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

Carsten Løvbo Andersen · Accepted Answer · 2022-02-23 08:38:33Z

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>

Collectives™ on Stack Overflow

Add multiple Values to Table using Jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related