Замена текста DOM с помощью jQuery

Question

У меня есть базовая схема DOM, которая содержит таблицу с фиктивными данными, такими как:

<table>
  <tr>
    <td>name</td>
    <td>phone</td>
  </tr>
</table>

Мой сценарий использует это как фиктивную строку для клонирования и замены текста между тегами TD текстом из базы данных. Не копируя весь сценарий здесь, я попробовал две разные вещи:

newRow.find("td.name").text(participant.name);

newRow.find("contains("phone")").text(participant.homePhone);

Ни один из них не работает. Сценарий просто клонирует и отображает строки, но у меня есть 30 строк «имя» и «телефон».

Я использовал консоль Firebug для отладки, и я уверен, что он правильно получил данные из JSON, загруженные в параметр "member". Что я делаю не так?

Answer 1

вы используете td.name, которого нет в вашей разметке..name обозначает класс, поэтому вам понадобится разметка, например: <td class="name"></td>, чтобы это работало.

Если вы используете это как фиктивную строку и заменяете эти два td, я быпредоставить класс для каждого типа <td class="name"></td><td class="phone"></td>, чтобы использовать newRow.find("td.name") или использовать что-то вроде: newRow.find("td:first") и newRow.find("td:last")

Answer 2

newRow.find("td:contains(name)").text(participant.name);

newRow.find("td:contains(phone)").text(participant.homePhone);

Answer 3

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

newRow.find(":contains('name')").text(participant.name);
newRow.find(":contains('phone')").text(participant.homePhone);

Еще лучше было бы дать шаблоны классов и использовать их или просто положиться на позиционирование.

Positioning:

newRow.find('td:first-child')
      .text(participant.name)
      .next()
      .text(participant.homePhone);

Классы:

newRow.find( 'td.name' ).text( participant.name );
newRow.find( 'td.phone' ).text( participant.homePhone );

Необходимые изменения:

<table> 
  <tr> 
    <td class="name">name</td> 
    <td class="phone">phone</td> 
  </tr> 
</table>

Answer 4

find('td.name') ищет td с class="name", которого у вас нет.Я бы порекомендовал добавить это в ваш HTML, чтобы создать ловушку для jQuery для обновления текста.Особенно, если у вас есть несколько на странице.

Кроме того, как вы настраиваете newRow?