使用 jQuery 更改/替换表列值

Question

我的表结构如下：

<table class=ms-listviewtable>
  <tr class="ms-itmhover">
    <td class="ms-vb2">Value1</td>
    <td class="ms-vb2">Value2</td>
    <td class="ms-vb2">Value3</td>
    <td class="ms-vb2 ms-lastCell">Value4</td>
  </tr>
</table>

我希望能够将当前“Value4”的最后一列的值更改为“changedValue”，例如使用 jQuery；

我已经写了以下内容，但它似乎根本不起作用，不确定我哪里出错了：

$(document).ready(function() {
  $('.ms-vb2 .ms-lastCell').each(function() {
    var lastColumn = $(this).html();
    var replaceValue = lastColumn.Append("Changed Content");

    $(this).html(replaceContent);
  });
});

任何建议将不胜感激。

Answer 1

我了解到您想将文本附加到最后一个 td。这是代码

jQuery('.ms-lastCell').each(function() {

 var lastColumn = $(this).html();
 var replaceValue = lastColumn + "Changed Content";

jQuery(this).html(replaceValue );


});

http://jsfiddle.net/G3eYh/13/

Answer 2

首先，你的选择器不正确：

$('.ms-vb2.ms-lastCell')

由于两个类都属于一个 td，因此您必须将它们放置在没有任何空格的位置。有了空格，这意味着有一个元素类 ms-vb2，并且在这个元素中还有另一个类 ms-lastCell 的元素。

您可能还想使用 .text() 而不是 html() 和一个简单的 javascript 字符串连接：

var lastColumn = $(this).text();
var replaceValue = lastColumn + "Changed Content";
$(this).text(replaceContent);

Answer 3

您在选择器中使用空格分隔您的类名，这里不需要一个，您只需要更改文本而不是 html。

见 jsFiddle here

Answer 4

下面这行存在三个问题：

$('.ms-vb2 .ms-lastCell).eachl(function() {

1. 您没有在lastCell 之后添加结束'。
2. 选择器中的空格表示您将选择作为.ms-vb2 元素后代的任何.ms-lastCell 元素。如果您删除空格并说'.ms-vb2.ms-lastCell'，它将找到具有这两个类的元素。
3. 您拼错了 .each（末尾有一个 l）。

.each() 回调的内容存在一些问题。第一行没问题，它获取单元格的内容。但后来：

var replaceValue = lastColumn.Append("Changed Content");

我不确定您要在这里做什么，但lastColumn 是一个字符串，而字符串没有Append() 方法。如果您想添加到现有值，您可以说：

var replaceValue = lastColumn + "Changed Content";

如果你只是想替换它说：

var replaceValue = "Changed Content";

如果您打算丢弃旧值并只提供一个新值，您可以跳过所有这些并说：

$(this).html("Changed Content");

最后，当只有一个单元格将匹配您的选择器时（或者当您想将所有匹配的元素更新为相同的值）时，您实际上不需要使用.each()，因此您可以这样做：

 $('.ms-vb2.ms-lastCell').html("Changed Content");

或者，如果您想添加到现有内容，您可以使用带有回调函数的.html() 方法的语法：

 $('.ms-vb2.ms-lastCell').html(function(i, oldHtml) {
     return oldHtml + "Changed Content";
 });

jQuery 调用你的回调函数并传入旧值，这样你就可以按照你认为合适的方式处理它，然后你返回的值成为元素的新 html 内容。如果多个元素与您的选择器匹配，您的回调将被依次调用。

Answer 5

您的 html 和 javascript 中有很多错误，但试试这个：

$(document).ready(function() {

    $('.ms-vb2', '.ms-listviewtable').each(function() {

        $(this).html("Changed Content");

    });
});

Answer 6

$(document).ready(function() {
    $('.ms-lastCell').each(function() {
        var lastColumn = $(this).html(); 
        var replaceValue = lastColumn.Append("Changed Content");
        $(this).html(replaceContent);
    });
});

我认为您在页面的头部使用了这个 jquery 代码。请在页面末尾</body>标签之前使用此代码，然后它将起作用。