Как добавить input в ячейки таблицы

@Danila00000 · Регистрация: 03.09.2015

Author24 — интернет-сервис помощи студентам

Все привет. Я создаю динамическую редактируемую таблицу на HTML. Сейчас застрял на редактировании ячеек td таблицы table. Как мне добавить импуты в первый столбец и во второй столбец? (в третий столбец я хочу добавить выпадающие списки)?

Вот HTML:

HTML5

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="favicon.ico">
    <meta http-equiv="Content-Type" content="text/html">
    <link rel="stylesheet" href="css/style.css">
    <script src="./js/create-a-table.js"></script>
    <title>Test</title>
</head>
<body>
    <form>
        <h2>выберите таблицу</h2>
        <select type="text" class="name-certificate">
            <option value="Test1">Test1</option>
            <option value="Test2">Test2</option>
        </select>
        <h2>выберите нужное кол-во строк</h2>
        <input type="number" class="rows-certificate">
        <input type="text" name="fix press enter on input " value="Fix IE bug" style=" display:none ">
        <p><input type="button" class="button-create-table" value="Создать таблицу">
    </form>
 
</body>
</html>

Вот JS:

Javascript

document.addEventListener('DOMContentLoaded', function () {
        let certificateTable = document.querySelector('.button-create-table');
 
        certificateTable.addEventListener('click', function () {
            let nameCertificate = document.querySelector('.name-certificate');
            let rowsCertificate = document.querySelector('.rows-certificate');
            let row =  rowsCertificate.value;
            // проверяем на правильность введенных данных
            if (row < 1 || row == 0 ) {
                alert('ОШИБКА! Вы должны ввести положительное число.');
                throw "stop";
            }
            let divСertificate = document.createElement('div');
            divСertificate.className = 'div-certificate';
 
            // после выбора вида Теста создаем форму для ввода
            if (nameCertificate.value == 'Test1') {
                divСertificate.innerHTML = "<h1>Test1</h1>";
                let elem = document.body.children[0];
                elem.remove();
            } 
            else {
                divСertificate.innerHTML = "<h1>Test2</h1>";
                let elem = document.body.children[0];
                elem.remove();
            }
            
            let newTable = document.createElement('table');
            newTable.className = 'table-certificate';
 
            // создаем заголовки таблице
            let th = newTable.insertRow(0);
            th.insertCell(0).outerHTML = "<th>1</th>";
            th.insertCell(1).outerHTML = "<th>2</th>";
            th.insertCell(2).outerHTML = "<th>3</th>";
 
 
            for (let i = 1; i <= row; i++) {
                let newRow = newTable.insertRow(i);
                for (let j = 0; j <= 2; j++) {
                    let newCell = newRow.insertCell(j)
                        if ( j == 0) {
                            let NewInput = document.createElement('input');
                            //appendChild(NewInput);
                        }
                }
            }
            document.body.appendChild(divСertificate).appendChild(newTable).appendChild(NewInput);
        });
});

@Evgen1337 · 27.09.2018, 14:00

Javascript

if ( j == 0 || j == 1) {
  let NewInput = document.createElement('input');
  newCell.appendChild(NewInput);
}

с select тоже самое createElement и newCell.append(select)

@Danila00000 · 27.09.2018, 15:58 **[ТС]**

Evgen1337, спасибо большое, помогло))) У меня к вам есть еще один вопрос. Я создал в 3 столбце элементы select. Я могу создать любое количество options к этому select.

Javascript

1	NewSelect.options[0] = new Option("Test");

Но у меня довольно много выйдет элементов Option. Возможно ли реализовать такой вариант, что все options хранятся в отдельном текстовом файле, и во время создания таблицы options автоматически подгружаются в элемент select?

@Evgen1337 · 27.09.2018, 16:09

Да, можно. (https://developer.mozilla.org/... jacentHTML)

Но тогда options должны быть в скрипте как строка (var options = '<option value="1">1</option>...', или их надо загрузить с помощью ajax, если грузить ajax'ом то лучше в виде json. Но это все делать надо.

@Danila00000 · 27.09.2018, 16:30 **[ТС]**

Спасибо, за совет) Буду разбираться.

@Evgen1337 · 27.09.2018, 16:47

index.html

PHP/HTML

<html>
 
<head>
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      var select = document.getElementById('select')
      data.forEach(function (item, idx) {
        select.options[idx] = new Option(item.title, item.value)
      })
    })
  </script>
  <script type="text/javascript" src="data.js"></script>
</head>
 
<body>
  <select id="select"></select>
</body>
 
</html>

data.js

Javascript

const data = [
  { id: 1, value: 1, title: 'one' },
  { id: 2, value: 2, title: 'two' },
  { id: 3, value: 3, title: 'thr' },
]

@Danila00000 · 27.09.2018, 17:35 **[ТС]**

Evgen1337, еще раз огромное спасибо вам за помощь))) Прям не ожидал)))

@Evgen1337 249 / 162 / 68 Регистрация: 10.12.2017 Сообщений: 558
	27.09.2018, 16:09	4
	Да, можно. (https://developer.mozilla.org/... jacentHTML) Но тогда options должны быть в скрипте как строка (var options = '<option value="1">1</option>...', или их надо загрузить с помощью ajax, если грузить ajax'ом то лучше в виде json. Но это все делать надо. 0

@Danila00000 0 / 0 / 0 Регистрация: 03.09.2015 Сообщений: 35
	27.09.2018, 16:30 [ТС]	5
	Спасибо, за совет) Буду разбираться. 0

@Danila00000 0 / 0 / 0 Регистрация: 03.09.2015 Сообщений: 35
	27.09.2018, 17:35 [ТС]	7
	Evgen1337, еще раз огромное спасибо вам за помощь))) Прям не ожидал))) 0

Как добавить input в ячейки таблицы

Решение