• Home
  • Jobs
  • coursesAndChallenges
  • Teachers
  • For business
  • Blog
  • ES/EN

0

14
Views
Add multiple Values to Table using Jquery

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

14 days ago ·

Santiago Trujillo

1 answers
Answer question

0

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>

14 days ago · Santiago Trujillo Report
Answer question
Remote jobs
Loading

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Startups
Legal
Terms and conditions Privacy policy
© 2022 PeakU Inc. All Rights Reserved.