How can I get this loop's information in a table (Javascript)
Question
I'm trying to get the loop that is in the code after this text to have the information outputted into a table. To explain this further, the function function doEvens() creates a loop that takes uses the number a person enters into the input text box Type in your Number: <input type="number" id="num"> , and displays all even numbers between that number and 2 within a paragraph: <p id="space"></p> , when the numbers are displayed within the paragraph they have a semicolon and a space separating them, instead of that I would like the numbers to be within a table, I have tried using createElementById and with no luck, I have tried putting a table between certain areas of the code, with no luck I still have not been able to fix this, I have many other projects I am working on and I am not very good at coding.
<!DOCTYPE html>
<html>
<head>
<script>
function doEvens() {
var number = document.getElementById('num').value;
if(number > 1) {
if(number % 2 == 0) {
while(number > 2) {
document.getElementById("space").innerHTML += (+number - 2) + "; ";
number = +number - 2;
}
} else {
number--;
alert(number);
while(number > 1) {
document.getElementById("space").innerHTML += (+number - 2) + "; ";
number = +number - 2;
}
}
}
}
</script>
</head>
<body>
Type in your Number: <input type="number" id="num">
<button onclick="doEvens();" href="javascript;">Submit</button>
<p id="space"></p>
</p>
</body>
</html>
1 answers
solution1
0 2014-10-13 13:27:48
I have implemented the solution with table . Here it is:
function doEvens() { var number = document.getElementById('num').value, table = document.getElementById('evensTable'), cellsInRow = 20, evens = [], tableContent = '', row = '', i = 3, startAt, numberOfRows; table.innerHTML = ''; while (i++ < number - 1) { i % 2 === 0 && evens.push(i); } numberOfRows = evens.length / 20; for (var r = 0; r < numberOfRows; r++) { row = '<tr>'; startAt = r * cellsInRow; for (var c = startAt; c < startAt + cellsInRow; c++) { if (!evens[c]) break; row += '<td>' + evens[c] + '</td>'; } row += '</tr>'; tableContent += row; } table.innerHTML = tableContent; }
<body> Type in your Number: <input type="number" id="num"> <button onclick="doEvens();" href="javascript;">Submit</button> <table id="evensTable"> </table> </body>
This table contains one row, but you can also create more rows in code (say after every 10 numbers print)
If something is not clear for you, please ask me.
UPDATE
I have updated the solution as per your needs.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.