Динамическое добавление html в dom с помощью JS

314

07 апреля 2017, 23:50

Есть такой код . В данном случае я вручную создаю каждую ячейку,заполняю ее и вставляю в ряд.но в данном случае табличка маленькая. И я подумал,что когда таблица будет скажем на 10 колонок для каждой создавать ячейку в ручную это совсем не дело... Собственно вопрос,как можно добавить ряд в табличку "малой кровью"? Также интересует такой вопрос. В данном случае я добавлял просто текст с помощью метода textContent,но если в таблицу надо будет добавить кнопку и структура ячейки будет:

<td>
<button></button>(или <a></a>)
</td>

Как можно в таком случае добавить такой HTML?

Answer 1

Можешь установить в свою среду разработки emmet и простое написание:

table>tr*10>td*5

и нажатием клавиши tab создаст таблицу на 10 рядов и 5 ячеек в каждом ряду.

  <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

С помощью JS можешь добавлять так:

$('table tr:last-child').after('<tr><a href=""></a></tr>')

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Почему такой большой bundle.js?

изучаю reactjs на этом примере: https://metanitcom/web/react/5

285

javascript

Функция не возвращает ответ Ajax запроса [дубликат]

На данный вопрос уже ответили:

324

javascript

выбор элемента из СКРИПТА js

Есть такой код который рисует график торговМне нужно выбрать с него Элементы текущих позиций валюты

384

javascript

проблема с панелью поделится на сайте

Добрый день я установил код на свой сайт wix поделится соц сетях все установилось но когда нажимаю поделится сылка на сайт выглядит так www-nowceiling-ruusrfiles

290