Question

我试图通过jQuery更新表中某行的某些单元格的内容。这是典型行的结构：

<tr>
  <td>2015-01-01</td>
  <td>09:00</td>
  <td>18:30</td>
  <td>1</td>
  <td>Normal Day</td>
  <td>No comments</td>
  <td><a href=#><img src="edit.png" class="edit"></a></td> 
  <td><a href=#><img src="delete.png" class="delete"></a></td>   
</tr>

之前我将行保存在这样的变量中（单击编辑按钮时）：

row = $(this).closest('tr');

当然，目标是用更新的值更新单元格（图标除外）。为此，我尝试了这个：

$(':nth-child(1)', row).text(date);
$(':nth-child(2)', row).text(in_time);
$(':nth-child(3)', row).text(out_time);
$(':nth-child(4)', row).text(value);
$(':nth-child(5)', row).text(type);
$(':nth-child(6)', row).text(comments);

尽管前六个单元格正在更新，但最后两个单元格正在转换为带有日期文本的链接。我想这是因为$(':nth-child(1)', row).text(date)将<img>标记与第一个孩子匹配并替换它。

我如何做到这一点？

Answer 1

使用:eq()代替:nth-child() 小心，eq索引从0开始，而不是1。

Answer 2

您的假设是正确的，:nth-child(1)定位row的所有第一个子孙后代。

您只需要定位td元素，因此添加元素选择器可以解决问题

$('td:nth-child(1)', row).text(date);

或仅定位row

的孩子

row.children(':nth-child(1)').text(date);

Answer 3

您也可以使用此方法：

var i = 0;
$('td').each(function(){
    if(i < 5) {
    $(this).html('update ' + i);
        alert(i);
    }
    i++;
})

连续更新前六个（八个）单元格

3 个答案: