Aquí los valores para las tablas provienen de la base de datos con la ayuda de Ajax. Cómo almacenar múltiples valores en la fila de la tabla usando jquery o 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>
los valores provienen de 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'
cómo agregar múltiples valores a la tabla usando Jquery. Cómo agregar valores a
Tendrías que hacer algo como esto:
$.each(datafromAjax,function() { $('#company-details tbody').append(`<tr><td>${this.Company}</td><td>${this.Contact}</td><td>${this.Country}</td></tr>`) })
Esto recorrerá los datos de su éxito ajax y los agregará a su tabla
Manifestación
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>