Как сделать создание таблиц по клику на button? при этом пользователь сам вводит шырину и высоту таблицы, количество рядов и столбцов

181

03 июня 2018, 01:20

нужно чтобы после нажатия на кнопку "создать таблицу", создавалась таблица со всеми настройками которые ввел пользователь

Я решыл это задание а удалить невозможно. Поетому пишу решение может комуто будет нужно. Также написал вопрос конкретнее

getId('createTable').onclick = function(){
    let trTable = getId('rowElementsTable').value;
    let tdTable = getId('colElementsTable').value;
    let widthTable = getId('widthColTable').value;
    let heightTable = getId('heightColTable').value;
    let weightTable = getId('weightLine').value;
    let typeLine = getId('lineType').value;
    let colorLine = getId('lineColor').value;

    getId('optionBox').style.display = 'none';
    getId('mainBoxes').style.display = 'block';
    getId('textArea').value += '<table style="border:'+weightTable+'px '+typeLine+' '+colorLine+'">';
    for(let i = 1; i<=trTable; i++){
        getId('textArea').value += '<tr>';
        for(let i = 1; i<=tdTable; i++){
            getId('textArea').value += '<td style="width: '+widthTable+'px; height:'+heightTable+'px; border:'+weightTable
        +'px '+typeLine+' '+colorLine+'">some text</td>';
        }
        getId('textArea').value += '</tr>';
    }
    getId('textArea').value += '</table>';
}

Answer 1

getId('createTable').onclick = function(){
    let trTable = getId('rowElementsTable').value;
    let tdTable = getId('colElementsTable').value;
    let widthTable = getId('widthColTable').value;
    let heightTable = getId('heightColTable').value;
    let weightTable = getId('weightLine').value;
    let typeLine = getId('lineType').value;
    let colorLine = getId('lineColor').value;

    getId('optionBox').style.display = 'none';
    getId('mainBoxes').style.display = 'block';
    getId('textArea').value += '<table style="border:'+weightTable+'px '+typeLine+' '+colorLine+'">';
    for(let i = 1; i<=trTable; i++){
        getId('textArea').value += '<tr>';
        for(let i = 1; i<=tdTable; i++){
            getId('textArea').value += '<td style="width: '+widthTable+'px; height:'+heightTable+'px; border:'+weightTable
        +'px '+typeLine+' '+colorLine+'">some text</td>';
        }
        getId('textArea').value += '</tr>';
    }
    getId('textArea').value += '</table>';
}

Answer 2

В основном там будет использоваться document.getElementById("") , который получает значение формы допустим и делает с ним что-то. А что делает - это уже вам решать. Но пример кода по аналогу css вот: https://jsfiddle.net/ArtyomBosenko/cr5ads05/