Question 240467 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Creating table with JS from input

I need to create a table from input with JS. So it works not completely, maybe you know what’s wrong. I need to add border-style, border-color, border-width. But the elements don’t work together. And how to remove counter from cells?

getS('.btn-create-table').onclick = function() {
  console.log(event.target)

  const countTr = table.countTr.value;
  const countTd = table.countTd.value;
  const widthTd = table.widthTd.value;
  const heightTd = table.heightTd.value;
  const borderWidth = table.borderWidth.value;
  const borderType = table.borderType.value;
  const borderColor = table.borderColor.value;

  for (let i = 0; i < countTr; i++) {
    getS('.edit-area').value += `<table>  <tr style=""> ${i}  </tr>`
    for (let h = 0; h < countTd; h++) {
      getS('.edit-area').value += `<td style= "width: ${widthTd}, height: ${heightTd}, border-style: ${borderType}, border-width: ${borderWidth}, border-color: ${borderColor}"> ${h}  TD </td> `;

      console.log(borderType, borderColor, borderWidth)
    }
  }

  getS('.edit-area').value += '</table>';
  getS('.first').classList.add('show') //show block
  getS('.second').classList.remove('show') // hide block
}
Tags:

1

Answers


  1. 0

    Your mistake is using , commas:

    getS('.edit-area').value += `<td style= "width: ${widthTd}, height: ${heightTd}, border-style: ${borderType}, border-width: ${borderWidth}, border-color: ${borderColor}"> ${h}  TD </td> `;
//                                                        ^                    ^

    Style should be split with ; semicolons

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search