使用jQuery和AJAX填充表

Question

I have a table as below;

<tr class="nm" style="height: 30px">
    <td style="width: 15px;">&nbsp;</td>
    <td class="section" colspan="5">mix</td>
    <td style="width: 15px;">&nbsp;</td>
</tr>
<tr>
    <td class="prev" rowspan="2"><<</td>
    <td class="content">&nbsp;</td>
    <td class="content">&nbsp;</td>
    <td class="content">&nbsp;</td>
    <td class="content">&nbsp;</td>
    <td class="content">&nbsp;</td>
    <td class="next" rowspan="2">>></td>
</tr>
<tr>
    <td class="title" >&nbsp;</td>
    <td class="title" >&nbsp;</td>
    <td class="title" >&nbsp;</td>
    <td class="title" >&nbsp;</td>
    <td class="title" >&nbsp;</td>
</tr>
<tr class="nm" style="height: 30px">
    <td style="width: 15px;">&nbsp;</td>
    <td class="section" colspan="5">cat</td>
    <td style="width: 15px;">&nbsp;</td>
</tr>
<tr>
    <td class="prev" rowspan="2"><<</td>
    <td class="content">&nbsp;</td>
    <td class="content">&nbsp;</td>
    <td class="content">&nbsp;</td>
    <td class="content">&nbsp;</td>
    <td class="content">&nbsp;</td>
    <td class="next" rowspan="2">>></td>
</tr>
<tr>
    <td class="title" >&nbsp;</td>
    <td class="title" >&nbsp;</td>
    <td class="title" >&nbsp;</td>
    <td class="title" >&nbsp;</td>
    <td class="title" >&nbsp;</td>
</tr>

I am using AJAX with jQuery to populate table contents. I have a script as below;

$('.next').click(function() {
  var $nxt = $(this);
  var $titlex = $nxt.prev().parent('.title');
  $.ajax({
          type: 'POST',
          url: 'ajax.php',
          data: 'id=2&dir=mix',
          cache: false,
          success: function(result3) {
            $titlex.eq(index).html("XX");
          },
        });

});

which is supposed to change contents in class="title" in its corresponding row. The php file ajax.php will return an array of data, containing 5 members in JSON. I want to populate the corresponding row's title cells using this method. the other row's contents should not be changed.

How can I do this?

Answer 1

For starters, I think you want to change:

var $titlex = $nxt.prev().parent('.title');

to

var $titlex = $nxt.parent().next().children('.title');

see the fiddle

I simplified things and had to take out the ajax but now that it is selecting the right element can you take it from there?

Answer 2

$nxt.prev()

is to my mind :

<td class="content">&nbsp;</td>

Then :

.parent('.title')

Gives you nothing because the parent has no class named "title" (just a no attribute tr tag).

First of all, say that you are receiving JSON :

$.ajax({
          type: 'POST',
          url: 'ajax.php',
          data: 'id=2&dir=mix',
          cache: false,
          dataType: "json",
          success: function(result3) {
            //your stuff here
          },
        });

Than wouldn't that be easier for you to give an ID with the index of the tag you want to fill, and then do a for loop on your json result. Before that, you could access to the right tr parent node by and access all your title elements:

var trTitle = $(this).parent().next();

Then here are you titles :

trTitle.find('.title');

I have tested nothing, but I think this works.

Answer 3

Here you go:

http://jsfiddle.net/fehays/QNXXf/

$(function() {
    $('.next').click(function() {
        var $nxt = $(this);
        var $titlex = $nxt.parent().next().find('.title');
        var result3 = {"data":["value1","value2","value3","value4","value5"]};

        $.each(result3.data, function(index, value) {
            $titlex.eq(index).html(value);
        });
    });
});

I removed the ajax call and just used a json object containing an array. Also note that your selector for finding the .title elements was wrong. Needs to be something like this:

var $titlex = $nxt.parent().next().find('.title');

Answer 4

Here is a fiddle with what you want :

http://jsfiddle.net/g9ZZr/1/

$('.next').click(function() {
   var $nxt = $(this);
   var $titlex = $nxt.parent().next().children();

  //The data you receive from your webservice.
  var myArray = ['title1','title2','title3','title4','title5'];
  $titlex.each(function(index,elem)
  {
     $(elem).html(myArray[index]);
  });

});