Develop Reference

double forEach to double for Loop

I'm creating an HTML table from a server-side array (google apps script; so tableArray is coming from there). I have two forEach functions which work. However, I'm attempting to use two for loops instead because I'd like to be able to add different classes to different <td>'s.
The output doesn't come out as expected (see #1 below). I can either get an array in one column (instead of each element of the array as a separate <td> or the arrays are repeated in each <td> (see #2 below).
What do I need to change in my for loops to get the expected output?
You can see the version that works HERE.
1 (works with forEach)
2 (does not work with for)
Index.html
function buildTable(tableArray) {
var table = document.getElementById('table');
var tableBody = document.createElement('tbody');
var tbodyID = tableBody.setAttribute('id', 'tbody');
for (var i = 0; i < tableArray.length; ++i) {
var column = tableArray[i];
var colA = column[0];
var colB = column[1];
var colC = column[2];
var colD = column[3];
if (colA != "") {
var row = document.createElement('tr');
for (var j = 0; j < column.length; ++j) {
var cell = document.createElement('td');
cell.appendChild(document.createTextNode(column));
row.appendChild(cell);
}
}
tableBody.appendChild(row);
}
table.appendChild(tableBody);
document.body.appendChild(table);
}

Instead of line cell.appendChild(document.createTextNode(column));
write cell.appendChild(document.createTextNode(column[j]));
You've forgotten to add index [j]

// Loop over rows
for (var i = 0; i < tableArr.length; i++) {
var row = tableArr[i];
// loop over columns
for( var j =0; j<row.length; j++){
//create each column and append to row
}
// append row to table body
}
// append table body to DOM
For performance reasons you want to write to the DOM only once and create the table in memory first.

Change
cell.appendChild(document.createTextNode(column));
to
cell.appendChild(document.createTextNode(column[i]));
This will make it loop through all of your column data properly instead of appending the same content of the whole array repeatedly.

Multiply Rows With Column in JavaScript using loops

I want to multiply rows with columns inside HTML table each td contains input type elements and each is dynamic means they can be created more at runtime but the process of multiplication will remain the same.
Click here to see image
below is my code
var inputs = $(".volo");
var id = 0;
for (var i = 0; i < inputs.length; i++) {
for (var j = 0; j < r.length; j++) {
if (i < r.length) {
alert(parseFloat($(inputs[i]).val()) + "*" + r[j]);
j = 0;
} else {
j = j + 1;
alert(parseFloat($(inputs[i]).val()) + "*" + r[j]);
}
break;
}
}
above code works fine when a number of rows and columns are 2 .inputs contains values coming from one type of tds and r array contains values coming from different tds.length of inputs array will always be greater than r array.

The first loop should loop the column while the second loop should be the row loop, assume you need to read the input you can do this with jquery ,let x be row while y be column
$(`#volX${x}Y${y}` ).val()
Your Add Chemical Vol button must be able to create specific mapping of id="volXnumYnum" input.
play around with that it might help you solve your problem

Name each cell on each row from 1 to 9

the problemI want to make a sudoku solver and to do that I need to name each cell from 1 to 9 in every row. If you know another way to make this please tell me. Here's the code:
function crear (){
var table = document.getElementById("table");
// enter code here
for (var i = 1; i < 10; i++) {
var showfila = document.createElement("TR");
showfila.setAttribute("id", "myTr" + i);
document.getElementById("table").appendChild(showfila);
for (var a = 1; a < 10; a++) {
var input = document.createElement("INPUT");
input.setAttribute("id", "myInp" + a);
document.getElementById("myTr" + i).appendChild(input);
document.getElementById("myInp" + a).value=a;
}
}
}

I'm assuming the "name" you are talking about for each cell is the name property and also that these cells need to be created (based on your code) so you can do something like this:
EDIT
The name now includes the corresponding row and column. I also added comments so that if this is not what you are looking for, you can refer to them to edit your code correctly.
function createTable(){
var table = document.getElementById("table");
//Loop for rows
for (var i = 1; i < 10; i++) {
//Loop for columns
for (var j = 1; j < 10; j++) {
var cell = document.createElement("TR");
//var i would be the row and var j would be the column
cell.name=i+"-"+j;
table.appendChild(cell);
}
}
}

Javascript html table not showing

I've been trying to total a list of die rolls (sum of pairs) in a table using javascript to avoid hard-coding 11 rows in my html page and accessing each row seperately later in the js file to add the values.
So I used a loop and document.writeln() to do this in a more compact way but the output doesn't show the table or anything.
document.writeln("<table border=\"1\"><thead><tr><th>Sum of Dice</th><th>Total Times Rolled</th></tr></thead><tbody>");
for (var i=0; i < 11; i++)
{
document.writeln("<tr><td>2</td><td></td></tr>");
}
document.writeln("</tbody></table>");
The rows shouldn't all start with 2, I only used that number as a test and the second tag in the for loop is for the totals that I already have in an array but my issue is with displaying the table.

Try this:
<script>
var code = "";
function write(){
code += "<table border=\"1\"><tr><th>Sum of Dice</th><th> Total Times Rolled</th></tr>";
for (var i = 0; i < 11; i++){
code += "<tr><td>2</td><td></td></tr>";
}
code += "</table>";
document.body.innerHTML = code;
}
</script>
And don`t forget to put this code to html:
<body onload="write()">
Here you have the result:

I think create table by writeln with whole bunch of HTML text string is generally not a good idea. I would recommend create table dom element via Javascript and append it to the wrapper element.
var headerContent = ['Sum of Dice', 'Total Times Rolled'];
var table = document.createElement('table'),
header = table.createTHead(),
row,
cell;
table.border = 1;
// construct header
row = header.insertRow(0);
for (var i = 0, len = headerContent.length; i < len; i++) {
cell = row.insertCell(i);
cell.innerHTML = headerContent[i];
}
// construct table content
for (var i = 0; i < 11; i++) {
row = table.insertRow(i + 1);
for (var j = 0, len = headerContent.length; j < len; j++) {
cell = row.insertCell(j);
cell.innerHTML = '2';
}
}
// add table element to the dom tree
var wrapper = document.getElementById('wrapper');
wrapper.appendChild(table);
See http://jsfiddle.net/LgyuE/

How to perform sliding animation on a table?

I have a table with and many (dynamic number) rows, and the screen visible region is 4 rows. Each table cell contains an image. I need to slide this table to show the 5th and more rows, and I want the animation effects when sliding it.
I have tried .slideUp() and .slideDown(), but I don't know what exactly I should animate.
My table generation code is:
$().ready(function() {
for(var i = 0; i < 20; i++) {
var $tr = $('<tr/>');
for(var j = 0; j < 7; j++) {
$tr.append($('<td><div><img src="pic' + (j + i * 7) + '.png" /></div></td>'));
}
$('tbody').append($tr);
}
});
How can I really do an animation effect or sliding rows?

You can´t use the slide animations on tables because it´s not possible to set the height of rows to 0.
See Animating opening/closing of table columns in jQuery

Try this:
$(document).ready(function() {
for(var i = 0; i < 20; i++) {
var $tr = $('<tr/>');
for(var j = 0; j < 7; j++) {
$tr.append($('<td><div><img src="pic' + (j + i * 7) + '.png" /></div></td>'));
}
$tr.hide().appendTo($('tbody')).slideDown();
}
});
UPDATE
This jsFiddle works: http://jsfiddle.net/A4fn6/