How to display a multiplication table from inputted row and column in jquery?

Question

I'm a bit struggling on coding multiplication table using jquery, so i already have the code to display the multiplication table from the inputted row, the multiplication table that i need is to display it from inputting how many rows and columns.

Hoping for y'all could help me, big thanks.

 $( ".button" ).click(function() { var n = document.getElementById( "num" ).value; var arr = []; for (i=0; i<n; i++) arr[i] = []; var sub = 1; var count = 1; i = 0; while (count <= n){ var loopcount = 1; while (loopcount <= n){ arr[i].push(sub); sub += count; loopcount++; } count++; sub = count; i++; } var $table = $("<table></table>"); var $row; arr.forEach(function(subArr){ $row = $("<tr></tr>"); subArr.forEach(function(el){ $row.append('<td>' + el + '</td>'); }); $table.append($row); }); $table.appendTo(document.body); });

 .wrapper { margin: 150px auto; max-width: 800px; text-align: center; font-family: 'Oxygen', sans-serif; } form { padding: 4em 4em 2em; max-width: 400px; margin: 100px auto; border-radius: 10px; } td { padding: 10px; text-align: center; } label { display: block; font-size: 1.6em; margin: 0 0 .5em; color: #000; } input[type="text"], input[type="button"] { display: block; background: #f5f5f5; border: 1px solid #848484; font-size: 1.8em; border-radius: 10px; margin: 30px auto; } table { margin: 0 auto; border: 5px solid black; border-radius: 10px; font-size: 24px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="wrapper"> <h1>multiplication table</h1> <form> <label for="num">Input number of rows</label> <input type="text" value="" id="num"/> <input type="button" value="Submit" class="button"/> <p id="answer"></p> <div id="myDiv"></div> </form> </div> </body>

Answer 1

For your current code, you could add a second input to get the number of columns, get the value of that entered variable and in the second while loop while (loopcount <= n){ use that instead of n

 $(".button").click(function() { var n = document.getElementById("num").value; var c = document.getElementById("cols").value; var arr = []; for (i = 0; i < n; i++) arr[i] = []; var sub = 1; var count = 1; i = 0; while (count <= n) { var loopcount = 1; while (loopcount <= c) { arr[i].push(sub); sub += count; loopcount++; } count++; sub = count; i++; } var $table = $("<table></table>"); var $row; arr.forEach(function(subArr) { $row = $("<tr></tr>"); subArr.forEach(function(el) { $row.append('<td>' + el + '</td>'); }); $table.append($row); }); $table.appendTo(document.body); });

 .wrapper { margin: 150px auto; max-width: 800px; text-align: center; font-family: 'Oxygen', sans-serif; } form { padding: 4em 4em 2em; max-width: 400px; margin: 100px auto; border-radius: 10px; } td { padding: 10px; text-align: center; } label { display: block; font-size: 1.6em; margin: 0 0 .5em; color: #000; } input[type="text"], input[type="button"] { display: block; background: #f5f5f5; border: 1px solid #848484; font-size: 1.8em; border-radius: 10px; margin: 30px auto; } table { margin: 0 auto; border: 5px solid black; border-radius: 10px; font-size: 24px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <label for="num">Input number of rows</label> <input type="text" value="" id="num" /> <label for="num">Input number of columns</label> <input type="text" value="" id="cols" /> <input type="button" value="Submit" class="button" /> <p id="answer"></p> <div id="myDiv"></div> </form>

How to display a multiplication table from inputted row and column in jquery?

Question

1 answers

solution1
0 ACCPTED 2018-07-14 18:06:54

How to display a multiplication table from inputted row and column in jquery?

Question

1 answers

solution1 0 ACCPTED 2018-07-14 18:06:54

solution1
0 ACCPTED 2018-07-14 18:06:54