jQuery: Adding td element to a tr

Question

Using a row variable to get data dynamically and set the table row.

var row = '<tr>'+
      '<td>'+obj.Message+'</td>'+
      '<td>'+obj.Error+'</td>'+
      '<td>'+obj.Detail+'</td>'+
      '</tr>';

Based a value I tried to add another <td> to the row object but it didn't work.

if(obj.Type=='Error') {
  $(row).find('td:last').append('<td>'+ obj.ErrorCode+'</td>');
}
$('table> tbody:last').append(row);

First I tried to just append the <td> to row but that didn't work as well.

$(row).append('<td>'+ obj.ErrorCode+'</td>');

It's worth mentioning to him that that wouldn't stop his code trying to add the cell. It would make it try to add the cell every time, regardless of obj.Type. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Oct 31, 2013 at 15:09

azz · Accepted Answer · 2013-10-31 15:24:29Z

10

You're not storing the last row.

When you call $(row).find(...).append(...) the result is not being stored in a variable. The best solution is probably keeping a jQuery object from the start:

//         v--- use a jQuery object here
var $row = $('<tr>'+
      '<td>'+obj.Message+'</td>'+
      '<td>'+obj.Error+'</td>'+
      '<td>'+obj.Detail+'</td>'+
      '</tr>');    
if(obj.Type=='Error') {
    $row.append('<td>'+ obj.ErrorCode+'</td>');
}
$('table> tbody:last').append($row);

See fiddle

edited Oct 31, 2013 at 15:24

answered Oct 31, 2013 at 15:14

azz

5,9703 gold badges33 silver badges60 bronze badges

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

1 Comment

azz Over a year ago

@HimanshuYadav I made a typo which has been corrected (line 1).

PSL · Accepted Answer · 2013-10-31 15:06:35Z

4

Instead of append use after and use === (or ==) instead of =

  if(obj.Type === 'Error') {
    $(row).find('td:last').after('<td>'+ obj.ErrorCode+'</td>'); //This will add the new td after the last one
   ..

or just append it to the row:

   $(row).append('<td>'+ obj.ErrorCode +'</td>'); //this will do the same thing, less code and append this as last td of your row.

answered Oct 31, 2013 at 15:06

PSL

124k21 gold badges257 silver badges243 bronze badges

Comments

tymeJV · Accepted Answer · 2013-10-31 15:06:26Z

0

Your appending INSIDE a td, you want .after

if(obj.Type=='Error') {
    $(row).find('td:last').after('<td>'+ obj.ErrorCode+'</td>');
}

And the whole, == over = is an issue as well.

answered Oct 31, 2013 at 15:06

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Comments

Shoaib Chikate · Accepted Answer · 2013-10-31 15:08:10Z

0

You have done mistake here:

 obj.Type='Error'

(=)act as assignment operator here.

Check with

  if(obj.Type=='Error'){
   //hence code.
  }

answered Oct 31, 2013 at 15:08

Shoaib Chikate

8,97112 gold badges50 silver badges70 bronze badges

2 Comments

Himanshu Yadav Over a year ago

That was a typo. I have fixed it.

Shoaib Chikate Over a year ago

So you can accept answer from above which you feel appropriate :)

Dhaval Marthak · Accepted Answer · 2013-10-31 15:11:33Z

0

use == comparision operator for comparision: To insert new cell use .after() or you can just append whole row using .append()

if(obj.Type=='Error') {
   $(row).append('<td>'+ obj.ErrorCode+'</td>');
}

edited Oct 31, 2013 at 15:11

answered Oct 31, 2013 at 15:06

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

Comments

MonkeyZeus · Accepted Answer · 2013-10-31 15:21:38Z

Don't you have to add row to the DOM before you can search it and add another <td>?

Solution 1

var row = '<tr>'+
          '<td>'+obj.Message+'</td>'+
          '<td>'+obj.Error+'</td>'+
          '<td>'+obj.Detail+'</td>';

if(obj.Type=='Error') {
    row += '<td>'+ obj.ErrorCode+'</td>';
}

row += '</tr>';

$('table> tbody:last').append(row);

Solution 2

var row = '<tr>'+
          '<td>'+obj.Message+'</td>'+
          '<td>'+obj.Error+'</td>'+
          '<td>'+obj.Detail+'</td>'+
          '</tr>';

$('table').append(row);

if(obj.Type=='Error') {
    $('table').find('td:last').after('<td>'+ obj.ErrorCode+'</td>');
}

Solution 3

var row = '<tr>'+
          '<td>'+obj.Message+'</td>'+
          '<td>'+obj.Error+'</td>'+
          '<td>'+obj.Detail+'</td>'+
          '</tr>';

$('table').append(row);

if(obj.Type=='Error') {
    $('table tr').append('<td>'+ obj.ErrorCode+'</td>');
}

Collectives™ on Stack Overflow

jQuery: Adding td element to a tr

6 Answers 6

1 Comment

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related