Jquery/JS : replace a row in a table

Question

I am trying to replace one whole row using JQuery but seems not working ( the row is NOT being replaced). Here is the link to the example code: http://jsfiddle.net/s2kwb/

JavaScript:

$("td.99999").first().parent().next().replaceWith("<tr><td >category 3</td>
<td >2222</td>
<td >something 22</td>
<td >something 22</td>
<td >$3,433</td>
<td >$300</td>
<td >$3,733</td>
<td >$349</td>
<td >$4,082</td>
</tr>");

Html:

<table border="1">
<tr >
  <th>category</th>
  <th>rank</th>
  <th>priority</th>
  <th>contact</th>
  <th>price</th>
  <th>tax</th>
  <th>total price</th>
  <th>shipping</th>
  <th>Net payment</th>
</tr>
<tr class="displaytagOddRow">
  <td class="99999">category 1</td>
  <td class="99999">99999</td>
  <td class="99999">something</td>
  <td class="99999">something</td>
  <td class="99999 alignRight">$3,433</td>
  <td class="99999 alignRight">$300</td>
  <td class="99999 alignRight">$3,733</td>
  <td class="99999 alignRight">$349</td>
  <td class="99999 alignRight">$4,082</td>
</tr>
<tr class="displaytagOddRow" style="Background-color:Red">
  <td class="3333">category 2</td>
  <td class="3333">3333</td>
  <td class="3333">something</td>
  <td class="3333">something</td>
  <td class="3333 alignRight">$3,433</td>
  <td class="3333 alignRight">$300</td>
  <td class="3333 alignRight">$3,733</td>
  <td class="3333 alignRight">$349</td>
  <td class="3333 alignRight">$4,082</td>
</tr>
</table>

What am I doing wrong?

Thanks in advance.

Matthias · Accepted Answer · 2012-12-20 08:18:21Z

5

Terminate the string for every line. See also the updated jsFiddle.

$("td.99999").first().parent().next().replaceWith("<tr><td >category 3</td>" +
    "<td >2222</td>" +
    "<td >something 22</td>" +
    "<td >something 22</td>" +
    "<td >$3,433</td>" +
    "<td >$300</td>" +
    "<td >$3,733</td>" +
    "<td >$349</td>" +
    "<td >$4,082</td>" +
    "</tr>");

The Google JavaScript Style Guide recommends this string concatenation and advises against multiline strings with the alternative backslash line breaks.

whitespace after the slash will result in tricky errors

edited Dec 20, 2012 at 8:18

answered Dec 19, 2012 at 17:25

Matthias

7,5356 gold badges59 silver badges92 bronze badges

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

Comments

Nope · Accepted Answer · 2012-12-19 17:32:41Z

2

Fixing the errors in your fiddle and adding jQuery as a reference made it work:

DEMO

Your string was not proper string literal. The console in the browser debug tool also stated that:

SyntaxError: unterminated string literal [Break On This Error]

$("td.99999").first().parent().next().replaceWith("category 3

Fixed script:

$("td.99999").first().parent().next().replaceWith("<tr><td >category 3</td><td >2222</td><td >something 22</td><td >something 22</td><td >$3,433</td><td >$300</td><td >$3,733</td><td >$349</td><td >$4,082</td></tr>");

answered Dec 19, 2012 at 17:32

Nope

22.4k8 gold badges50 silver badges73 bronze badges

1 Comment

VictorGram Over a year ago

This works too.thank you.Realized that the newline was the issue

Collectives™ on Stack Overflow

Jquery/JS : replace a row in a table

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related