Как задать ширину таблицы, вводя ширину из input?

Question

[volerass]

вот мой код:

Rows: <input type="text" id="rows" />
    <br />
    Cols: <input type="text" id="cols" /> 
    <br>
    Widht:<input type="text" id="widht" />
    <div id="tableContainer"></div>

JavaScript:

let rows = document.getElementById('rows')
let cols = document.getElementById("cols")
let tableContainer = document.getElementById("tableContainer")
 
function buildTable() {
 
    let table = 'Table:' + rows.value + "x" + cols.value;
 
    table += '<table border=1 >';
 
    for (let i = 1; i <= rows.value; i++) {
        table += '<tr>';
        for (let j = 1; j <= cols.value; j++) 
            table += '<td>' + i + "" + j + '</td>';
            table += '</tr>';
    }
    table += '</table>';
        tableContainer.innerHTML = table;
}
buildTable()
rows.oninput=function(){
    buildTable()
}
cols.oninput=function(){
    buildTable()
}

Comments

[Andrew]

Добрый. Вы ширину в пикселях задаете?

[Andrew]

а ещё, пишется не widht, а width =)) но я и сам так раньше путался)

[volerass]

Andrew, да

[volerass]

Andrew, как записать ширину в самом коде я знак,а как чтобы вводить в input я не знаю,помоги

[Евгений]

volerass, инлайново)

[Евгений]

https://codepen.io/ewgenij-pil-gin/pen/oNBWEOx?edi...

не пашет вставка)

Answer 1

[Сергей Соколов]

по аналогии с rows и cols добавьте width:

1. чтобы был элемент по его id
   
2. чтобы в buildTable бралось его .value и вставлялось в тег <table width="${сюда}px">
   
3. и чтобы по событию input тоже выполнялась buildTable()
   

Comments

[volerass]

Сергей Соколов вот так?

let rows = document.getElementById('rows')
let cols = document.getElementById("cols")
let width = document.getElementById("width")

let tableContainer = document.getElementById("tableContainer")

function buildTable() {

    let table =''

    table += '<table width="${width.value}px">';
    
    for (let i = 1; i <= rows.value; i++) {
        table += '<tr >';
        for (let j = 1; j <= cols.value; j++) 
            table += '<td>' + i + "" + j + '</td>';
            table += '</tr >';
        
        
    }
    table += '</table>';
        tableContainer.innerHTML = table;
}
buildTable()
rows.oninput=function(){
    buildTable()
}
cols.oninput=function(){
    buildTable()
    
}
width.oninput=function(){
    buildTable()
    
}

[Сергей Соколов]

volerass, чтобы заработала подстановка ${что-то тут} надо строку заключить в обратные одиночные кавычки: table += `<table width="${width.value}px">`;

[volerass]

Сергей Соколов, точно,забыл,спасиба

[volerass]

Сергей Соколов, а почему когда я задаю цвет рамки или самой таблицы ничего не происходит ?

[Сергей Соколов]

volerass, как-то не так задаёте, вероятно

[volerass]

Сергей Соколов,
вот так
colors <input type="text" id="color" />
table += `<table color="${color.value}">`

[Сергей Соколов]

volerass, у тега table нет атрибута color. Попробуйте через стили: `<table style="color: ${color.value}">`

[volerass]

Сергей Соколов, не могли бы вы мне с этим еще помочь?-> Как сделать редактор HTML-разметки в браузере?