Replacing DOM text with jQuery

Question

I have a basic DOM "outline" that contains a table with dummy data like this:

<table>
  <tr>
    <td>name</td>
    <td>phone</td>
  </tr>
</table>

My script uses this as a dummy row to clone and replace the text between the TD tags with text from a database. Without copying the whole script here, here are two different things I've tried:

newRow.find("td.name").text(participant.name);

newRow.find("contains("phone")").text(participant.homePhone);

Neither one works. The script clones and displays the rows just fine, but I have 30 rows of "name" and "phone".

I used Firebug's console.log to debug and I am sure that it's got the data correctly from JSON, loaded into the "participant" parameter. What am I doing wrong?

Answer 1

you're using td.name which doesn't exist in your markup. the .name denotes a class so you'd need markup like: <td class="name"></td> in order for that to work.

If you're using this as a dummy row and replacing those two td's, I'd supply a class to each like <td class="name"></td><td class="phone"></td> to use newRow.find("td.name") or use something like: newRow.find("td:first") and newRow.find("td:last")

Answer 2

find('td.name') looks for a td with a class="name", which you don't have. I would recommend adding this to your HTML to create a hook for jQuery to update the text. Especially if you have several on the page.

Also, how are you setting newRow?

Answer 3

newRow.find("td:contains(name)").text(participant.name);

newRow.find("td:contains(phone)").text(participant.homePhone);

Answer 4

The second version is almost right if I understand what you are tring to do. Note the colon preceding the selector and the use of inner single quotes.

newRow.find(":contains('name')").text(participant.name);
newRow.find(":contains('phone')").text(participant.homePhone);

Better yet would be to give the templates classes and use those or simply rely on the positioning.

Positioning:

newRow.find('td:first-child')
      .text(participant.name)
      .next()
      .text(participant.homePhone);

Classes:

newRow.find( 'td.name' ).text( participant.name );
newRow.find( 'td.phone' ).text( participant.homePhone );

Necessitating this change:

<table> 
  <tr> 
    <td class="name">name</td> 
    <td class="phone">phone</td> 
  </tr> 
</table>