How to add table rows to html table using JQuery

Question

I am new to JQuery and I am trying to append rows to an existing table.

What is wrong about the code?
How can I insert an empty row without specifying the values in the columns?
Is there a better way to do this? How?

$(document).ready(function () {			 
			 var tbl = $('#mytable');
			 appendTableRow(tbl)
		});
		
		function appendTableRow(table) {			   
			var newrow = '';

			newrow += "<tr>";
			newrow += "<td>21</td>";
			newrow += "<td>22</td>";
			newrow += "</tr>";
			 			
			table.find('tbody tr:last').append(newrow);     
		}

table {
		border-collapse: collapse;
	}

	table td {
		border: 1px solid black;
	}  
  
  table th {
		border: 1px solid black;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
	  <thead>
		<th>Col1</th>
		<th>Col2</th>
	  </thead>
	  
	  <tbody>
		<tr>
		  <td>11</td>
		  <td>12</td>
		</tr>
	  </tbody>
	</table>

Do not append to table row, so NOT table.find('tbody tr:last').append(newrow); , but to table body: table.find('tbody').append(newrow); . — skobaljic
– skobaljic, Commented Oct 2, 2017 at 11:28
Possible duplicate of How do you append rows to a table using jQuery? — krishna raikar
– krishna raikar, Commented Oct 2, 2017 at 11:32

user1735921 · Accepted Answer · 2017-10-02 11:30:52Z

0

Your code is fine. Just append to tbody.

$(document).ready(function () {			 
			 var tbl = $('#mytable');
			 appendTableRow(tbl)
		});
		
		function appendTableRow(table) {			   
			var newrow = '';

			newrow += "<tr>";
			newrow += "<td>21</td>";
			newrow += "<td>22</td>";
			newrow += "</tr>";
			 			
			$('tbody').append(newrow);     
		}

table {
		border-collapse: collapse;
	}

	table td {
		border: 1px solid black;
	}  
  
  table th {
		border: 1px solid black;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
	  <thead>
		<th>Col1</th>
		<th>Col2</th>
	  </thead>
	  
	  <tbody>
		<tr>
		  <td>11</td>
		  <td>12</td>
		</tr>
	  </tbody>
	</table>

answered Oct 2, 2017 at 11:30

user1735921

1,3991 gold badge24 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ProEvilz · Accepted Answer · 2017-10-02 11:30:26Z

0

1) Nothing is wrong, it's doing what it's written to do. Programmatically, it's working fine.

(I almost feel this is a trick question)

2) Instead of newrow += "<td>21</td>"; use newrow += "<td> </td>"; ?

3) Is there a better way to do this? How?

^ These types of questions are off-topic on here.

answered Oct 2, 2017 at 11:30

ProEvilz

5,44311 gold badges47 silver badges81 bronze badges

1 Comment

Elio Fernandes Over a year ago

This was not a trick question! If you run the code you will see that no new row was created. The two cells created were join next to the 1st row.

Collectives™ on Stack Overflow

How to add table rows to html table using JQuery

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related