Jquery: How do i add <td> and </td> tags to my jquery loop?

Question

Hello i have the following loop

for(let i=0;i<data.length;i++) {
$("#tablerowid").append('<td>');
$("#commentid").append(`<p>${data[i].id}</p>`+`<br>`);
$("#username").append(`<p>${data[i].userName}</p>`+`<br>`);
$("#usermail").append(`<p>${data[i].email}</p>`+`<br>`);
$("#createdat").append(`<p>${data[i].createdAt}</p>`+`<br>`);
$("#commentmessage").append(`<p>${data[i].message}</p>`+`<br>`);
$("#deletecomment").append(`<ahref="/admin/dashboard/showposts/deletecomment/${postid}/${data[i].id}" style="text-decoration:none;"class="btn btn-danger btn-fw mx-auto" onclick="return confirm('Are you sure you want to delete this comment?');">Delete Comment</a>`+`<br>`);

and the following html table

<tbody>
    <tr id="tablerowid">
    <td id="commentid"></td>
    <td id="username"></td>
    <td id="usermail"></td>
    <td id="createdat"></td>
    <td id="commentmessage"></td>
    <td id="deletecomment"></td>
    </tr>  
</tbody>

I need the jquery loop to append the elements each time it goes again through the loop on a new table row, but i am unable to understand how to write the code to do this.I have tried something with the first code line but it did not work. Any help would be greatly appreciated.

Answer 1

Is this what you want?

 const data = [ {id: 1, userName: 'Name 1', email: 'lorem@ipsum.com', createdAt: new Date(), message: 'Lorem ipsum'}, {id: 2, userName: 'Name 2', email: 'lorem@ipsum.com', createdAt: new Date(), message: 'Lorem ipsum'}, {id: 3, userName: 'Name 3', email: 'lorem@ipsum.com', createdAt: new Date(), message: 'Lorem ipsum'}, {id: 4, userName: 'Name 4', email: 'lorem@ipsum.com', createdAt: new Date(), message: 'Lorem ipsum'}, ] for(let i=0;i<data.length;i++) { const newRow = `<tr> <td id="commentid">${data[i].id}</td> <td id="username">${data[i].userName}</td> <td id="usermail">${data[i].email}</td> <td id="createdat">${data[i].createdAt}</td> <td id="commentmessage">${data[i].message}</td> </tr>` $("table tbody").append(newRow) }

 td { border: 1px solid grey; padding: .5rem; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody></tbody> </table>

You could also write it like this:

 const data = [ {id: 1, userName: 'Name 1', email: 'lorem@ipsum.com', createdAt: new Date(), message: 'Lorem ipsum'}, {id: 2, userName: 'Name 2', email: 'lorem@ipsum.com', createdAt: new Date(), message: 'Lorem ipsum'}, {id: 3, userName: 'Name 3', email: 'lorem@ipsum.com', createdAt: new Date(), message: 'Lorem ipsum'}, {id: 4, userName: 'Name 4', email: 'lorem@ipsum.com', createdAt: new Date(), message: 'Lorem ipsum'}, ] data.forEach(d => { let newRow = '<tr>' for (const p in d) { newRow += `<td id="${p}">${d[p]}</td>` } newRow += '</tr>' $("table tbody").append(newRow) })

 td { border: 1px solid grey; padding: .5rem; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody></tbody> </table>

Answer 2

You can create a template-based approach like below code.

 var comments = [ { comment_id: 1, user_name: "John", user_mail: "john@test.com", comment_message: "Test 1" }, { comment_id: 2, user_name: "John Doe", user_mail: "john2@test.com", comment_message: "Test 2" } ]; var temp = $.trim($('#table-row-template').html()); $.each(comments, (k, c) => { var tr = temp.replace(/{{comment_id}}/ig, c.comment_id) .replace(/{{user_name}}/ig, c.user_name) .replace(/{{user_mail}}/ig, c.user_mail) .replace(/{{comment_message}}/ig, c.comment_message); $("#my-table tbody").append(tr); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script id="table-row-template" type="template"> <tr> <td>{{comment_id}}</td> <td>{{user_name}}</td> <td>{{user_mail}}</td> <td>{{comment_message}}</td> </tr> </script> <table id="my-table" border="1"> <thead> <tr> <th>ID</th> <th>User Name</th> <th>User Email</th> <th>Message</th> </tr> </thead> <tbody></tbody> </table>