Using Jquery, how do you update a row of an HTML table with the contests returned from a url?

In the following code, I have a div around each row in a table that I would like to update periodically. With this code, I can call a url passing the id for each div as a parameter and get back the correct replacement html for the row from my server. Unfortunately, once I get the html back, I am unable to figure out how to properly replace the contents of each div.

How would you update this jquery code to update each div based on the html returned from the server?

    <table class="problems" cellspacing="0" width="900">
      <tr style="color:#开发者_如何转开发00ce1d;font-weight:bold;text-align:left">
        <td>One</td><td>Two</td>
      </tr>

      <tr>
       <div id='1' class='playerRow'>
          <td> One</td>
          <td> Two</td>
       </div>
      </tr>

      <tr>
       <div id='2' class='playerRow'>
          <td> One</td>
          <td> Two</td>
       </div>
      </tr>

    </table>

    function updateRows() {
        var getDivs = 0;

        //iterate div with class playerRow
        $("div.playerRow").each(function() {
            alert('div id--'+this.id);
            var theDiv = $(this)

            // send ajax requrest to url encoded as div.id
            $.get('/myServerUrl?id='+this.id, function(data) {
                //The right url response comes back
                alert('div id--'+this.url+'--ajax response--'+data);

                //###### Problem area  ##########
                //Can't figure out how to view the current Div contents or update them.
                //alert('current contents ='+theDiv.html());
                //theDiv.replaceWith(data);
                //alert('current contents ='+theDiv.html());            
            });
          });
    }
    updateRows(); //The first time

---

First your markup is wrong

 <tr>
   <div id='1' class='playerRow'>
      <td> One</td>
      <td> Two</td>
   </div>
  </tr>

The TD does not belong in a DIV but in a TR!

You should fix that first. This should work:

 <tr id='1' class='playerRow'>
      <td> One</td>
      <td> Two</td>
  </tr>

---

Maybe the jQuery .load is what you need:

Description: Load data from the server and place the returned HTML into the matched element.

    load( url, [ data ], [ complete(responseText, textStatus, XMLHttpRequest) ] )

url A string containing the URL to which the request is sent.

data A map or string that is sent to the server with the request.

complete(responseText, textStatus, XMLHttpRequest) A callback function that is executed when the request completes.

Sample:

  $('#result').load('ajax/test.html');

So your code would be

  $(".playerRow").each(function() {
                 $(this).load('/myServerUrl?id='+this.id)
   })

---

I don't know what is the response of /myServerUrl?id='+this.id

But maybe you should try

$.get('/myServerUrl?id='+this.id, function(data) {
      $('#'+this.url).html(data); 
 });