Jquery HTML или ПОСЛЕ или ДОБАВИТЬ с тегом таблицы HTML

#html #jquery #html-table #jquery-selectors

#HTML #jquery #html-таблица #jquery-селекторы

Вопрос:

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_html_after2

 <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function afterText() {
  $("#tblGrid").html("<td>NameName2</td><td>Budget Value 2</td></tr><tr><td>NameName3</td><td>Budget Value 3</td>");
}
</script>
</head>
<body>
<table>
 <tbody>
 <th><h4>Name Heading</h4></th>
 <th>
    <table>
        <thead>
        <tr>
            <th>Budget Heading</th>
        </tr>
        </thead>
   </table>
  </th>
     
 <tr id="tblGrid"></tr>
 <tr><td>NameName1</td><td>Budget Value 1</td></tr>
 </tbody>
</table>

<button onclick="afterText()">Button</button>

</body>
</html>

ВЫВОД примерно такой после нажатия кнопки:

Название Заголовок Бюджет Заголовок

NameName3 Бюджетное значение 3

NameName1 Бюджетное значение 1

Кнопка

Не могли бы вы помочь понять, куда идет значение с номером «2»?

Ожидаемый результат:

Название Заголовок Бюджет Заголовок

NameName2 Бюджетное значение 2

NameName3 Бюджетное значение 3

NameName1 Бюджетное значение 1

Кнопка

Также каждый раз, когда мы нажимаем кнопку, она не должна добавлять 2 и 3, а очищать старые значения итерации. Пожалуйста, предложения!

Ответ №1:

Ваша структура таблицы html немного неверна. Я изменил структуру thead тега. И вам не нужно использовать h4 тег для этого.

Я определил ваш tr тег с id= tblGrid как tbody тег.

Кроме того, вы используете этот html() метод. Но этот метод перезаписывает содержимое. Лучше используйте append() метод.

 <!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script>
            function afterText() {
                $("#tblGrid").append("<tr><td>NameName2</td><td>Budget Value 2</td></tr><tr><td>NameName3</td><td>Budget Value 3</td></tr>");
            }
        </script>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Name Heading</th>
                    <th>Budget Heading</th>
                </tr>
            </thead>
            <tbody id="tblGrid">
                <tr>
                    <td>NameName1</td>
                    <td>Budget Value 1</td>
                </tr>
            </tbody>
        </table>
        <button onclick="afterText()">Button</button>
    </body>
</html>

Развернуть фрагмент

1. Привет, С. Кузнецов, спасибо за вашу помощь. Я могу использовать этот метод и делать свои вещи сейчас. Единственное, что я добавил, это использовать empty перед append (…empty().append …), Потому что при нескольких нажатиях кнопки он сохраняет старое значение, и я не хочу этого, поэтому пришлось внести некоторые коррективы для NameName1 и бюджетного значения 1, но это работает для меня.

2. @HardikNuwal, привет. Да, метод append() динамически добавляет те же значения. Так что empty() имеет смысл. Рад помочь.