I can't figure out why this code is not working out. What am I doing wrong? I need to use document.write to create my table in Javascript. Any help would be appreciated!
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var rows;
var cols;
function table(rows, cols){
document.write('<table border="1">');
for (i=0, i < rows, i++){
document.write('<tr>');
for (j=0, j < cols, j++) {
document.write('<td>' + 'cell' + '</td>');
}
document.write('</tr>');
}
document.write('</table>');
}
document.write (table(2, 4));
</script>
</body>
</html>
I can't figure out why this code is not working out. What am I doing wrong? I need to use document.write to create my table in Javascript. Any help would be appreciated!
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var rows;
var cols;
function table(rows, cols){
document.write('<table border="1">');
for (i=0, i < rows, i++){
document.write('<tr>');
for (j=0, j < cols, j++) {
document.write('<td>' + 'cell' + '</td>');
}
document.write('</tr>');
}
document.write('</table>');
}
document.write (table(2, 4));
</script>
</body>
</html>
-
1
Don't use
document.write! Why are you using mas?! Why are you writingundefined? – Andrew Li Commented Jan 8, 2017 at 0:59 - Start by looking at the errors in browser dev tools console. You have logic problems but also syntax problems that the console will point you to – charlietfl Commented Jan 8, 2017 at 1:00
-
I don't remend using
document.write();but the reason this isn't working is because of yourfor()loops. Replace,with;examplei=0; i<rows; i++– NewToJS Commented Jan 8, 2017 at 1:00 - @NewToJS that's one problem but function returns nothing to write also – charlietfl Commented Jan 8, 2017 at 1:01
-
@charlietfl yes, it will also write undefined due to
document.write (table(2, 4));this should only be a function calltable(2, 4);– NewToJS Commented Jan 8, 2017 at 1:04
1 Answer
Reset to default 3Ok, by now you got an ear full of document.write, refer to this about the subject.
At a glance your syntax is good with two glaring exceptions is that in a for loop, we use semicolons because a for loop is like a shorthand form of 3 statements and what we have after a statement so browsers know you are finished stating a statement is a ;.
for(let i=0; i < rows; i++) {...}
The other glaring error is how you are calling the function at the end, it should be:
table(2,4);
The following Snippet demonstrates an alternate way of creating tables. Details mented in Snippet.
SNIPPET
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!--We don't have to add "type="text/javascript"...
<script> tags anymore-->
<script>
var rows;
var cols;
function createTable(rows, cols) {
/* Using creatElement() method is simple and fast...
|| ...but be mindful that even though you created...
|| ...an element, it's not going to showup until...
|| ...it is added to the DOM.
*/
var table = document.createElement('table');
/* At this point we have a <table> that's...
|| ..."floating around". This is the most...
|| ...advantageous time to add any attributes...
|| ...and other elements. It's costly to add...
|| ...to add to the DOM, so while any element...
|| ...is detached from the DOM (i.e. <table>,)...
|| ...add as much as you are able to before...
|| ...adding it to the DOM.
*/
table.setAttribute('border', '1');
/* for loop = 3 statements + 2 semicolons */
// let ~i~ equal 0;
// while ~i~ is less than ~rows~ continue looping;
// at the end of a loop increment ~i~ by 1;
for (let i = 0; i < rows; i++) {
// Now we have a detached <tr>...
var tRow = document.createElement('tr');
// ...which moves on to an inner loop
for (let j = 0; j < cols; j++) {
// A detached <td>
var tData = document.createElement('td');
// While <td> is detached, let's add text
tData.textContent = 'Cell';
/* appendChild() method will add the <td>...
|| ...to the <tr>. This inner for loop will...
|| ...continue to add <td> to this <tr>...
|| ...as many times the number of ~cols~...
|| ...That was set by this statement:
|| j < cols; and it's perpetuated by this:
|| j++
*/
tRow.appendChild(tData);
}
/* Once the <tr> has pleted all of the...
|| inner loops, <tr> is now added to <table>...
|| ...That is one plete loop of the outer
|| ...loop. That's one <tr> filled with <td>...
|| ...This whole cycle will go on until...
|| ...whatever number ~rows~ is.
*/
table.appendChild(tRow);
}
/* After the last outer loop, the <table> is...
|| ...pleted and added to the <body> which...
|| ...already is attached to the DOM, thus...
|| ...<table> is in the DOM as well.
*/
document.body.appendChild(table);
}
// Call the function and pass 2 and 4.
createTable(2, 4);
</script>
</body>
</html>