Question

A newbie question,really.

Suppose I have a html table like this:

<div id="div1">
           <table id="table1" border="1">
             <tr>
                 <th bgcolor="#eee"><strong>ID</strong></th>
                 <th bgcolor="#eee"><strong>Price</strong></th>
            </tr>
             <tr>
                <td id='id1'>1111</td>
                <td id='id2'>2222</td>
             </tr>

         </table>
</div>

Now I am using Jquery to get data in json format from server, like this:

id1,19.99
id2,29.99
id3,39.00

What I want to achieve is: Look at the data, if the id already exist in table, update the cell value. If id doesn’t exist in the table, add a new row. How do I do that in JQuery? I just started to learn JQuery. Now I can use ajax call to get the data, but don’t know how to update the table. Any help is appreciated.

Answer 1

To see if a cell exists, you must test the .length of its selector:

$('#'+str).length; // zero if there is no such ID

Or you can just update the contents of that cell with .text(), which will fail if the ID doesn’t exist:

$('#'+str).text(newvalue);

To create a new row, you can .append() it to the table:

$('table tr#id_of_row').append('<td id="'+str+'">'+newvalue+'</td>');