Создать таблицу с полями для ввода

Question

var body = document.body,
        tbl  = document.createElement('table');
    tbl.style.width  = '100px';
    tbl.style.border = '1px solid black';

    for(var i = 0; i < 5; i++){
        var tr = tbl.insertRow();
        for(var j = 0; j < 5; j++){

                var td = tr.insertCell();
                
                td.appendChild(document.createTextNode('text'));
                td.style.border = '1px solid black';
               
        }
    }
    body.appendChild(tbl);

У меня есть функция которая создает таблицу заданного размера и помещает в нее текст. А как можно вставить в таблицу поле для ввода?

Answer 1

Через document.createTextNode('text') Вы создаёте только текст, а нужен редактируемый элемент.

Вариант с input:

var body = document.body,
        tbl  = document.createElement('table');
    tbl.style.width  = '100px';
    tbl.style.border = '1px solid black';

    for(var i = 0; i < 5; i++){
        var tr = tbl.insertRow();
        let el, td;
        for(var j = 0; j < 5; j++){

                td = tr.insertCell();
                el = document.createElement('input');
                el.value = 'text';
                el.setAttribute('type', 'text');
                el.setAttribute('name', `input-${i}-${j}`);
                td.appendChild(el);
                td.style.border = '1px solid black';
               
        }
    }
    body.appendChild(tbl);

input {
  width: 100%;
  border: none;
  min-width: 30px;
}

Вариант с ContentEditable атрибутом:

var body = document.body,
        tbl  = document.createElement('table');
    tbl.style.width  = '100px';
    tbl.style.border = '1px solid black';

    for(var i = 0; i < 5; i++){
        var tr = tbl.insertRow();
        let el, td;
        for(var j = 0; j < 5; j++){

                td = tr.insertCell();
                el = document.createElement('div');
                el.innerHTML = 'text';
                el.setAttribute('contenteditable', true);
                td.appendChild(el);
                td.style.border = '1px solid black';
               
        }
    }
    body.appendChild(tbl);

БЛОГ НА HUSL

Создать таблицу с полями для ввода

Ответы (1 шт):