While loop inside a for loop concatening
up vote
2
down vote
favorite
when I execute this code it spits out a new row inside the table but it includes the previous iteration along with the newest one. I want all "As" to be in the first row in the main table. And then I want all "Bs" to be in the second , etc, etc. Then for A0, A1, and A2, I want them to be in their own table within the first row, same for B0, B1 in the second row, etc, etc
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
}
</style>
</head>
<table id="table">
<tr>
<td>gerp gerp</td>
<td>
<table id="0"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="1"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="2"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="3"></table>
</td>
</tr>
</table>
<script>
var array = [
["A0---", "A1----", "A2---"],
["B0----", "B1---"],
["C0---", "C1---"],
["D0---", "D1---"]
];
var text = ""
console.log(array.length);
for (var i = 0; i < array.length; i++) {
var j = 0;
console.log(array[i].length);
while (j < array[i].length) {
text += "<tr><td>" + array[i][j] + "</td></tr>";
j++;
}
document.getElementById(i).innerHTML = text;
}
</script>
javascript for-loop while-loop
add a comment |
up vote
2
down vote
favorite
when I execute this code it spits out a new row inside the table but it includes the previous iteration along with the newest one. I want all "As" to be in the first row in the main table. And then I want all "Bs" to be in the second , etc, etc. Then for A0, A1, and A2, I want them to be in their own table within the first row, same for B0, B1 in the second row, etc, etc
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
}
</style>
</head>
<table id="table">
<tr>
<td>gerp gerp</td>
<td>
<table id="0"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="1"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="2"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="3"></table>
</td>
</tr>
</table>
<script>
var array = [
["A0---", "A1----", "A2---"],
["B0----", "B1---"],
["C0---", "C1---"],
["D0---", "D1---"]
];
var text = ""
console.log(array.length);
for (var i = 0; i < array.length; i++) {
var j = 0;
console.log(array[i].length);
while (j < array[i].length) {
text += "<tr><td>" + array[i][j] + "</td></tr>";
j++;
}
document.getElementById(i).innerHTML = text;
}
</script>
javascript for-loop while-loop
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
when I execute this code it spits out a new row inside the table but it includes the previous iteration along with the newest one. I want all "As" to be in the first row in the main table. And then I want all "Bs" to be in the second , etc, etc. Then for A0, A1, and A2, I want them to be in their own table within the first row, same for B0, B1 in the second row, etc, etc
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
}
</style>
</head>
<table id="table">
<tr>
<td>gerp gerp</td>
<td>
<table id="0"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="1"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="2"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="3"></table>
</td>
</tr>
</table>
<script>
var array = [
["A0---", "A1----", "A2---"],
["B0----", "B1---"],
["C0---", "C1---"],
["D0---", "D1---"]
];
var text = ""
console.log(array.length);
for (var i = 0; i < array.length; i++) {
var j = 0;
console.log(array[i].length);
while (j < array[i].length) {
text += "<tr><td>" + array[i][j] + "</td></tr>";
j++;
}
document.getElementById(i).innerHTML = text;
}
</script>
javascript for-loop while-loop
when I execute this code it spits out a new row inside the table but it includes the previous iteration along with the newest one. I want all "As" to be in the first row in the main table. And then I want all "Bs" to be in the second , etc, etc. Then for A0, A1, and A2, I want them to be in their own table within the first row, same for B0, B1 in the second row, etc, etc
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
}
</style>
</head>
<table id="table">
<tr>
<td>gerp gerp</td>
<td>
<table id="0"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="1"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="2"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="3"></table>
</td>
</tr>
</table>
<script>
var array = [
["A0---", "A1----", "A2---"],
["B0----", "B1---"],
["C0---", "C1---"],
["D0---", "D1---"]
];
var text = ""
console.log(array.length);
for (var i = 0; i < array.length; i++) {
var j = 0;
console.log(array[i].length);
while (j < array[i].length) {
text += "<tr><td>" + array[i][j] + "</td></tr>";
j++;
}
document.getElementById(i).innerHTML = text;
}
</script>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
}
</style>
</head>
<table id="table">
<tr>
<td>gerp gerp</td>
<td>
<table id="0"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="1"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="2"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="3"></table>
</td>
</tr>
</table>
<script>
var array = [
["A0---", "A1----", "A2---"],
["B0----", "B1---"],
["C0---", "C1---"],
["D0---", "D1---"]
];
var text = ""
console.log(array.length);
for (var i = 0; i < array.length; i++) {
var j = 0;
console.log(array[i].length);
while (j < array[i].length) {
text += "<tr><td>" + array[i][j] + "</td></tr>";
j++;
}
document.getElementById(i).innerHTML = text;
}
</script>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
}
</style>
</head>
<table id="table">
<tr>
<td>gerp gerp</td>
<td>
<table id="0"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="1"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="2"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="3"></table>
</td>
</tr>
</table>
<script>
var array = [
["A0---", "A1----", "A2---"],
["B0----", "B1---"],
["C0---", "C1---"],
["D0---", "D1---"]
];
var text = ""
console.log(array.length);
for (var i = 0; i < array.length; i++) {
var j = 0;
console.log(array[i].length);
while (j < array[i].length) {
text += "<tr><td>" + array[i][j] + "</td></tr>";
j++;
}
document.getElementById(i).innerHTML = text;
}
</script>
javascript for-loop while-loop
javascript for-loop while-loop
edited Nov 11 at 0:31
asked Nov 11 at 0:30
nms553
206
206
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
up vote
1
down vote
accepted
Initialize the text
variable to the empty string inside the first loop instead:
for (var i = 0; i < array.length; i++) {
let text = '';
But note that you can make your code more functional, shorter, and easier to read by using array methods like .map
and forEach
rather than using for
, while
, and manual iteration (better not to have to keep track of indicies):
array.forEach((subArr, i) => {
const text = subArr.map(item => "<tr><td>" + item + "</td></tr>");
document.getElementById(i).innerHTML = text.join('');
});
var array = [
["A0---", "A1----", "A2---"],
["B0----", "B1---"],
["C0---", "C1---"],
["D0---", "D1---"]
];
array.forEach((subArr, i) => {
const text = subArr.map(item => "<tr><td>" + item + "</td></tr>");
document.getElementById(i).innerHTML = text.join('');
});
table,
th,
td {
border: 1px solid black;
}
<table id="table">
<tr>
<td>gerp gerp</td>
<td>
<table id="0"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="1"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="2"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="3"></table>
</td>
</tr>
</table>
add a comment |
up vote
1
down vote
Declare this variable var text = "";
inside of the for-loop
var array = [ ["A0---", "A1----", "A2---"], ["B0----", "B1---"], ["C0---", "C1---"], ["D0---", "D1---"]];
for (var i = 0; i < array.length; i++) {
var text = "";
var j = 0;
while (j < array[i].length) {
text += "<tr><td>" + array[i][j] + "</td></tr>";
j++;
}
document.getElementById(i).innerHTML = text;
}
table,th,td { border: 1px solid black;}
<table id="table"> <tr> <td>gerp gerp</td> <td> <table id="0"></table> </td> </tr> <tr> <td>gerp gerp</td> <td> <table id="1"></table> </td> </tr> <tr> <td>gerp gerp</td> <td> <table id="2"></table> </td> </tr> <tr> <td>gerp gerp</td> <td> <table id="3"></table> </td> </tr></table>
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
1
down vote
accepted
Initialize the text
variable to the empty string inside the first loop instead:
for (var i = 0; i < array.length; i++) {
let text = '';
But note that you can make your code more functional, shorter, and easier to read by using array methods like .map
and forEach
rather than using for
, while
, and manual iteration (better not to have to keep track of indicies):
array.forEach((subArr, i) => {
const text = subArr.map(item => "<tr><td>" + item + "</td></tr>");
document.getElementById(i).innerHTML = text.join('');
});
var array = [
["A0---", "A1----", "A2---"],
["B0----", "B1---"],
["C0---", "C1---"],
["D0---", "D1---"]
];
array.forEach((subArr, i) => {
const text = subArr.map(item => "<tr><td>" + item + "</td></tr>");
document.getElementById(i).innerHTML = text.join('');
});
table,
th,
td {
border: 1px solid black;
}
<table id="table">
<tr>
<td>gerp gerp</td>
<td>
<table id="0"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="1"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="2"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="3"></table>
</td>
</tr>
</table>
add a comment |
up vote
1
down vote
accepted
Initialize the text
variable to the empty string inside the first loop instead:
for (var i = 0; i < array.length; i++) {
let text = '';
But note that you can make your code more functional, shorter, and easier to read by using array methods like .map
and forEach
rather than using for
, while
, and manual iteration (better not to have to keep track of indicies):
array.forEach((subArr, i) => {
const text = subArr.map(item => "<tr><td>" + item + "</td></tr>");
document.getElementById(i).innerHTML = text.join('');
});
var array = [
["A0---", "A1----", "A2---"],
["B0----", "B1---"],
["C0---", "C1---"],
["D0---", "D1---"]
];
array.forEach((subArr, i) => {
const text = subArr.map(item => "<tr><td>" + item + "</td></tr>");
document.getElementById(i).innerHTML = text.join('');
});
table,
th,
td {
border: 1px solid black;
}
<table id="table">
<tr>
<td>gerp gerp</td>
<td>
<table id="0"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="1"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="2"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="3"></table>
</td>
</tr>
</table>
add a comment |
up vote
1
down vote
accepted
up vote
1
down vote
accepted
Initialize the text
variable to the empty string inside the first loop instead:
for (var i = 0; i < array.length; i++) {
let text = '';
But note that you can make your code more functional, shorter, and easier to read by using array methods like .map
and forEach
rather than using for
, while
, and manual iteration (better not to have to keep track of indicies):
array.forEach((subArr, i) => {
const text = subArr.map(item => "<tr><td>" + item + "</td></tr>");
document.getElementById(i).innerHTML = text.join('');
});
var array = [
["A0---", "A1----", "A2---"],
["B0----", "B1---"],
["C0---", "C1---"],
["D0---", "D1---"]
];
array.forEach((subArr, i) => {
const text = subArr.map(item => "<tr><td>" + item + "</td></tr>");
document.getElementById(i).innerHTML = text.join('');
});
table,
th,
td {
border: 1px solid black;
}
<table id="table">
<tr>
<td>gerp gerp</td>
<td>
<table id="0"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="1"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="2"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="3"></table>
</td>
</tr>
</table>
Initialize the text
variable to the empty string inside the first loop instead:
for (var i = 0; i < array.length; i++) {
let text = '';
But note that you can make your code more functional, shorter, and easier to read by using array methods like .map
and forEach
rather than using for
, while
, and manual iteration (better not to have to keep track of indicies):
array.forEach((subArr, i) => {
const text = subArr.map(item => "<tr><td>" + item + "</td></tr>");
document.getElementById(i).innerHTML = text.join('');
});
var array = [
["A0---", "A1----", "A2---"],
["B0----", "B1---"],
["C0---", "C1---"],
["D0---", "D1---"]
];
array.forEach((subArr, i) => {
const text = subArr.map(item => "<tr><td>" + item + "</td></tr>");
document.getElementById(i).innerHTML = text.join('');
});
table,
th,
td {
border: 1px solid black;
}
<table id="table">
<tr>
<td>gerp gerp</td>
<td>
<table id="0"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="1"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="2"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="3"></table>
</td>
</tr>
</table>
var array = [
["A0---", "A1----", "A2---"],
["B0----", "B1---"],
["C0---", "C1---"],
["D0---", "D1---"]
];
array.forEach((subArr, i) => {
const text = subArr.map(item => "<tr><td>" + item + "</td></tr>");
document.getElementById(i).innerHTML = text.join('');
});
table,
th,
td {
border: 1px solid black;
}
<table id="table">
<tr>
<td>gerp gerp</td>
<td>
<table id="0"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="1"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="2"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="3"></table>
</td>
</tr>
</table>
var array = [
["A0---", "A1----", "A2---"],
["B0----", "B1---"],
["C0---", "C1---"],
["D0---", "D1---"]
];
array.forEach((subArr, i) => {
const text = subArr.map(item => "<tr><td>" + item + "</td></tr>");
document.getElementById(i).innerHTML = text.join('');
});
table,
th,
td {
border: 1px solid black;
}
<table id="table">
<tr>
<td>gerp gerp</td>
<td>
<table id="0"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="1"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="2"></table>
</td>
</tr>
<tr>
<td>gerp gerp</td>
<td>
<table id="3"></table>
</td>
</tr>
</table>
answered Nov 11 at 0:35
CertainPerformance
66.2k143152
66.2k143152
add a comment |
add a comment |
up vote
1
down vote
Declare this variable var text = "";
inside of the for-loop
var array = [ ["A0---", "A1----", "A2---"], ["B0----", "B1---"], ["C0---", "C1---"], ["D0---", "D1---"]];
for (var i = 0; i < array.length; i++) {
var text = "";
var j = 0;
while (j < array[i].length) {
text += "<tr><td>" + array[i][j] + "</td></tr>";
j++;
}
document.getElementById(i).innerHTML = text;
}
table,th,td { border: 1px solid black;}
<table id="table"> <tr> <td>gerp gerp</td> <td> <table id="0"></table> </td> </tr> <tr> <td>gerp gerp</td> <td> <table id="1"></table> </td> </tr> <tr> <td>gerp gerp</td> <td> <table id="2"></table> </td> </tr> <tr> <td>gerp gerp</td> <td> <table id="3"></table> </td> </tr></table>
add a comment |
up vote
1
down vote
Declare this variable var text = "";
inside of the for-loop
var array = [ ["A0---", "A1----", "A2---"], ["B0----", "B1---"], ["C0---", "C1---"], ["D0---", "D1---"]];
for (var i = 0; i < array.length; i++) {
var text = "";
var j = 0;
while (j < array[i].length) {
text += "<tr><td>" + array[i][j] + "</td></tr>";
j++;
}
document.getElementById(i).innerHTML = text;
}
table,th,td { border: 1px solid black;}
<table id="table"> <tr> <td>gerp gerp</td> <td> <table id="0"></table> </td> </tr> <tr> <td>gerp gerp</td> <td> <table id="1"></table> </td> </tr> <tr> <td>gerp gerp</td> <td> <table id="2"></table> </td> </tr> <tr> <td>gerp gerp</td> <td> <table id="3"></table> </td> </tr></table>
add a comment |
up vote
1
down vote
up vote
1
down vote
Declare this variable var text = "";
inside of the for-loop
var array = [ ["A0---", "A1----", "A2---"], ["B0----", "B1---"], ["C0---", "C1---"], ["D0---", "D1---"]];
for (var i = 0; i < array.length; i++) {
var text = "";
var j = 0;
while (j < array[i].length) {
text += "<tr><td>" + array[i][j] + "</td></tr>";
j++;
}
document.getElementById(i).innerHTML = text;
}
table,th,td { border: 1px solid black;}
<table id="table"> <tr> <td>gerp gerp</td> <td> <table id="0"></table> </td> </tr> <tr> <td>gerp gerp</td> <td> <table id="1"></table> </td> </tr> <tr> <td>gerp gerp</td> <td> <table id="2"></table> </td> </tr> <tr> <td>gerp gerp</td> <td> <table id="3"></table> </td> </tr></table>
Declare this variable var text = "";
inside of the for-loop
var array = [ ["A0---", "A1----", "A2---"], ["B0----", "B1---"], ["C0---", "C1---"], ["D0---", "D1---"]];
for (var i = 0; i < array.length; i++) {
var text = "";
var j = 0;
while (j < array[i].length) {
text += "<tr><td>" + array[i][j] + "</td></tr>";
j++;
}
document.getElementById(i).innerHTML = text;
}
table,th,td { border: 1px solid black;}
<table id="table"> <tr> <td>gerp gerp</td> <td> <table id="0"></table> </td> </tr> <tr> <td>gerp gerp</td> <td> <table id="1"></table> </td> </tr> <tr> <td>gerp gerp</td> <td> <table id="2"></table> </td> </tr> <tr> <td>gerp gerp</td> <td> <table id="3"></table> </td> </tr></table>
var array = [ ["A0---", "A1----", "A2---"], ["B0----", "B1---"], ["C0---", "C1---"], ["D0---", "D1---"]];
for (var i = 0; i < array.length; i++) {
var text = "";
var j = 0;
while (j < array[i].length) {
text += "<tr><td>" + array[i][j] + "</td></tr>";
j++;
}
document.getElementById(i).innerHTML = text;
}
table,th,td { border: 1px solid black;}
<table id="table"> <tr> <td>gerp gerp</td> <td> <table id="0"></table> </td> </tr> <tr> <td>gerp gerp</td> <td> <table id="1"></table> </td> </tr> <tr> <td>gerp gerp</td> <td> <table id="2"></table> </td> </tr> <tr> <td>gerp gerp</td> <td> <table id="3"></table> </td> </tr></table>
var array = [ ["A0---", "A1----", "A2---"], ["B0----", "B1---"], ["C0---", "C1---"], ["D0---", "D1---"]];
for (var i = 0; i < array.length; i++) {
var text = "";
var j = 0;
while (j < array[i].length) {
text += "<tr><td>" + array[i][j] + "</td></tr>";
j++;
}
document.getElementById(i).innerHTML = text;
}
table,th,td { border: 1px solid black;}
<table id="table"> <tr> <td>gerp gerp</td> <td> <table id="0"></table> </td> </tr> <tr> <td>gerp gerp</td> <td> <table id="1"></table> </td> </tr> <tr> <td>gerp gerp</td> <td> <table id="2"></table> </td> </tr> <tr> <td>gerp gerp</td> <td> <table id="3"></table> </td> </tr></table>
answered Nov 11 at 0:32
Ele
22.2k42044
22.2k42044
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53244760%2fwhile-loop-inside-a-for-loop-concatening%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown