Заполните таблицу, используя проблему JQuery AJAX

Question

У меня есть таблица, как показано ниже;

<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>

Я использую AJAX с jQuery для заполнения содержимого таблицы.У меня есть скрипт, как показано ниже:

$('.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");
          },
        });

});

, который должен изменить содержимое в class="title" в соответствующей строке.Файл php ajax.php вернет массив данных, содержащий 5 членов в формате JSON.Я хочу заполнить ячейки заголовка соответствующей строки, используя этот метод.содержимое другой строки не должно быть изменено.

Как я могу это сделать ??Будет более полезно, если кто-нибудь даст мне скрипку ..

Заранее спасибо ..

Answer 1

Вот скрипка с тем, что вы хотите:

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]);
  });

});

Answer 2

$nxt.prev()

мне кажется:

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

Тогда:

.parent('.title')

Ничего не дает, потому что у родителя нет класса с именем "title" (просто нет атрибута tr).

Прежде всего, скажите, что вы получаете JSON:

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

Если бы вам не было проще дать идентификатор с индексом тега, который вы хотите заполнить, а затем выполнить цикл for для вашего результата json. До этого вы могли получить доступ к правому родительскому узлу tr и получить доступ ко всем элементам заголовка:

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

Тогда вот вам титулы:

trTitle.find('.title');

Я ничего не тестировал, но думаю, что это работает.

Answer 3

Вот, пожалуйста:

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);
        });
    });
});

Я удалил вызов ajax и просто использовал объект json, содержащий массив.Также обратите внимание, что ваш селектор для поиска элементов .title был неправильным.Должно быть что-то вроде этого:

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

Answer 4

Для начала, я думаю, вы хотите изменить:

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

на

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

см. Скрипку

Я упростила вещии должен был вынуть ajax, но теперь, когда он выбирает правильный элемент, вы можете взять его оттуда?