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