Изменение / замена значений столбцов таблицы с помощью 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", на "ChangeValue", например, с помощью 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

Я понимаю, что вы хотите добавить текст к последнему тд. Вот код для этого

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

У вас есть пробел, разделяющий имена ваших классов в селекторе, где он не должен быть один, и вам просто нужно изменить текст, а не HTML.

См. JsFiddle здесь

Answer 3

Прежде всего, ваш селектор неверен:

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

Поскольку оба класса принадлежат одному тд, вы должны разместить их без пробелов.С пробелом это означает, что есть класс элемента ms-vb2, а внутри этого элемента есть еще один элемент с классом ms-lastCell.

Возможно, вы захотите также использовать .text () вместо html () и простогоКонкатенация строк JavaScript:

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

Answer 4

Есть три проблемы со следующей строкой:

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

1. Вы не ставили закрывающую ' после lastCell.
2. Пробел в вашем селекторе означает, что вы будете выбирать любые .ms-lastCell элементы, которые являются потомками .ms-vb2 элементов. Если вы удалите пробел и скажете '.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>, и тогда он будет работать.