Replace entire table row using JQuery

Question

I want to use JQuery to replace an entire <tr>. I can select the <tr> with no problem, I just can't figure out how to entirely replace it.

My selector/current code:

$("td#listprice").parents("tr:first").outerHTML(product.ListPrice)

This produces an error saying outerHTML is not a function.

My replacement (product.ListPrice) for the row is:

<tr><td>Some label</td><td>Some data</td></tr>

I don't exactly know that .outerHTML is what I'm wanting to use, I just know that I want to replace the entire table row including the <tr> and closing </tr>. I've seen some examples of replace a table row but they look way more complex than they need to be. I don't think I should have to remove the row in order to replace it, should I?

"but they look way more complex than they need to be" - but they worked. And your simple one - doesn't. ;-) — zerkms
– zerkms, Commented Jun 24, 2012 at 21:31
Zerkms, we'll see. I bet someone posts a 'simple' way of doing it. Thank you for your answer. (Or was it an answer?) — rwkiii
– rwkiii, Commented Jun 24, 2012 at 21:33
Thank you Sheikh. I figured it didn't need to be 20 lines of code to get it done. I'l try this! — rwkiii
– rwkiii, Commented Jun 24, 2012 at 21:34
@SheikhHeera. outerHTML isn't html(). The later is innerHTML. — gdoron
– gdoron, Commented Jun 24, 2012 at 21:37

VisioN · Accepted Answer · 2012-06-24 21:34:15Z

6

How about replaceWith?

$("#listprice").parent().replaceWith(product.ListPrice);

And yes, you can better use parent or closest instead of parents (see comments below).

answered Jun 24, 2012 at 21:34

VisioN

146k35 gold badges287 silver badges291 bronze badges

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

6 Comments

Felix Kling Over a year ago

Better use parent(). A td element can only be inside a tr element. No need to make it overly complicated.

The Alpha Over a year ago

What about $("td#listprice").closest('tr')

gdoron Over a year ago

@SheikhHeera. Read the comment above.

rwkiii Over a year ago

For some reason it's not changing the table row. .replaceWith seems like a good way of doing it, but it has no effect either. I know for sure that product.ListPrice is valid - I can see that in firebug. Here is my current line of code: $("td#listprice").parent().replaceWith(product.ListPrice);.

rwkiii Over a year ago

For some reason none of these are working... I'm assuming these would also replace the innerhtml as well? I'm not getting any errors either. Like I said above, I know product.ListPrice is correct because I can copy/paste it in another html and see the results. My current line of code is: $("td#listprice").parent().html(product.ListPrice);. It looks correct to me. :S

|

septemberbrain · Accepted Answer · 2012-06-24 21:38:45Z

0

I found 2 ways to do this:

replaceText = "<tr><td>Some label3</td><td>Some data3</td></tr>"
  $("td#listprice").parent().html(replaceText)
 //OR    $("td#listprice").parents("tr:first").html(replaceText)

answered Jun 24, 2012 at 21:38

septemberbrain

1,00810 silver badges25 bronze badges

1 Comment

rwkiii Over a year ago

I think your suggestion is pretty much like the one from gdoron above. For some reason it's not working. Am going to continue playing with it, but I'm stumped! The code looks right and there are no errors.

Collectives™ on Stack Overflow

Replace entire table row using JQuery

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related