multiply table via js-CodePudding

I want to make auto multiply table in HTML via JS, when the user put his number of columns and rows of the table, the page will print him table with all the number of the multiply number of row with the columns. For example if I put 5 columns over 4 rows it will print table like that:

1  |  2  |  3  |  4  |  5
2  |  4  |  6  |  8  |  10
3  |  6  |  9  |  12 |  15
4  |  8  |  12 |  16 |  20

Right now this is my HTML code:

let go = document.getElementById('btn');
let table = document.getElementById('table');

go.addEventListener('click', () => {
  let numCol = document.getElementById('txtColumns').value; //Get the value of txtColumns at the button click moment.
  let numRow = document.getElementById('txtRows').value;

  let td = "",
    tr = "";
  for (let i = 0; i < numCol; i  ) {
    td = td   "<td></td>";
  }
  for (let i = 0; i < numRow; i  ) {
    tr = tr   "<tr>"   td   "</tr>";
  }

  table.innerHTML = tr;
})

<html>
    <head>
        <meta charset="utf-8">
        <title>
            Multiply Table
        </title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <table >
            <tr>
                <td>
                    <input type="number" placeholder="Columns Number" id="txtColumns">
                </td>
                <td>
                    <input type="number" placeholder="Rows Number" id="txtRows">
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="btn">
                        send
                    </button>
                </td>
            </tr>
            <div>
                <table id="table"  border="1">
                    <!---print table-->
                </table>
            </div>
        </table>
        <script src="script.js"></script>
    </body>
</html>

I know how to print the table with the number of the rows and columns that the user choose but I don't know how to auto fill it with the number.

Thank you all!

CodePudding user response：

Here is the code to achieve it

<table>
<tr><td>Cols</td><td><input type="text" id="cols"/></td></tr>
<tr><td>Rows</td><td><input type="text" id="rows"/></td></tr>
<tr><td><a href='#' onclick='fill();return false;'>Fill My Table</a></td></tr>
</table>
<table id="mytable" border="1">
</table>

<script>
function fill() {
            var mytable = document.getElementById('mytable');
            var mycol=document.getElementById('cols').value;
            var myrow=document.getElementById('rows').value;
            for(let i=1;i<parseInt(1 myrow);i  )
            {
            var mytr = document.createElement('tr');
                for (let j=1;j<parseInt(1 mycol);j  )
                {
                    var mytd=document.createElement('td');
                    mytd.innerHTML=i*j;
                    mytr.appendChild(mytd)
                }
                mytable.appendChild(mytr);
            }
        }

</script>

CodePudding user response：

You need to put the td loop inside the tr loop (and give it a different variable to count with - j not i otherwise it'll break) so that you can multiply the row counter by the column counter.

Make the loops from 1 to less than or equal to the counter because you want to start at 1 not 0.

In the td loop, if it's the first, use the row count, otherwise multiply row count by column count

let go = document.getElementById('btn');
let table = document.getElementById('table');

go.addEventListener('click', () => {
  let numCol = document.getElementById('txtColumns').value; //Get the value of txtColumns at the button click moment.
  let numRow = document.getElementById('txtRows').value;

  let tr = "";
  for (let i = 1; i <= numRow; i  ) {
    tr  = "<tr>";
    for (let j = 1; j <= numCol; j  ) {
        if (j === 1){
            k = i;
        }else{
            k = j * i;
        }
        tr  = "<td>"   k   "</td>";
    }
    tr  = "</tr>";
  }
  table.innerHTML = tr;
})

<html>
    <head>
        <meta charset="utf-8">
        <title>
            Multiply Table
        </title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <table >
            <tr>
                <td>
                    <input type="number" placeholder="Columns Number" id="txtColumns">
                </td>
                <td>
                    <input type="number" placeholder="Rows Number" id="txtRows">
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="btn">
                        send
                    </button>
                </td>
            </tr>
            <div>
                <table id="table"  border="1">
                    <!---print table-->
                </table>
            </div>
        </table>
        <script src="script.js"></script>
    </body>
</html>