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

首先，我想你想改变：

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

到

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

see the fiddle

我简化了一些事情并且不得不取出ajax，但现在它正在选择正确的元素你能从那里拿走它吗？

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

您可以更轻松地使用要填充的标记的索引来提供ID，然后对您的json结果执行for循环。在此之前，您可以访问右侧的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

这是你想要的小提琴：

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

});

使用jQuery AJAX问题填充表

4 个答案: