使用 jQuery 和 AJAX 填充表

Populate table using jQuery and AJAX

本文关键字：填充 AJAX jQuery 使用      更新时间：2023-09-26

我有一个表格如下;

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

我正在使用带有jQuery的AJAX来填充表内容。我有一个脚本如下;

$('.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 成员。我想使用此方法填充相应行的标题单元格。不应更改另一行的内容。

我该怎么做？

首先，我认为您想更改：

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

自 

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

看小提琴

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

你来了：

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

这是你想要的摆弄：

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

$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');

我什么也没测试，但我认为这有效。

相关文章：