jQuery добавить новую строку в таблицу - обнаружение существующих строк, но не добавление новых

Question

У меня есть базовый c HTMl стол, как этот ...

jQuery(document).ready(function() {
  /* Calculate Total */
  jQuery('table tr.customRow').each(function(i, row) {
    console.log('Found Row');
    jQuery(this).append('<tr>New Test Row</tr>');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="customRow">
    <td>
      My Row 1
    </td>
  </tr>
  <tr class="customRow">
    <td>
      My Row 2
    </td>
  </tr>
  <tr class="customRow">
    <td>
      My Row 3
    </td>
  </tr>
</table>

Я пытаюсь использовать jQuery, чтобы добавить новый <tr> над каждым найденным <tr>, используя append. Журнал консоли показывает, что он находит строки, но не добавляет новую.

Где я ошибаюсь?

Answer 1

Вы не пытаетесь добавить новые tr с до tr с; вы пытаетесь вставить их в них.

Вместо:

jQuery(this).append('<tr>New Test Row</tr>');

Вы хотите:

jQuery(this).before('<tr>New Test Row</tr>');

Кроме того, как указывает @Rory McCrossan, вы не может иметь текстовые узлы непосредственно внутри tr узлов - вам нужен контейнер td.

Answer 2

В вашем коде есть две проблемы. Во-первых, HTML, который вы пытаетесь добавить, недействителен. <tr> элементы не могут содержать текстовые узлы. Вам нужно обернуть содержимое в td или th.

Во-вторых, append() будет помещать новый tr в существующий tr, что опять-таки недопустимо HTML. Учитывая вашу цель, используйте before().

Также обратите внимание, что, поскольку новый контент одинаков во всех случаях, each() l oop здесь не требуется. jQuery неявно l oop над коллекцией и создаст контент для каждого выбранного элемента для вас. Попробуйте это:

jQuery(function($) {
  $('table tr.customRow').before('<tr><td>New Test Row</td></tr>');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr class="customRow">
    <td>My Row 1</td>
  </tr>
  <tr class="customRow">
    <td>My Row 2</td>
  </tr>
  <tr class="customRow">
    <td>My Row 3</td>
  </tr>
</table>