Develop Reference

Javascript Dynamically build HTML table with button cell

Trying to get my dynamic table to have a button in last column. Have had no luck. Any help much appreciated.
var removeRow=document.createElement("BUTTON");
//Add the data rows.
for (var i = 1; i < data.length; i++) {
row = table.insertRow(-1);
for (var j = 0; j < 3; j++) {
var cell = row.insertCell(-1);
if (j==0) {
cell.innerHTML = data[i].userId}
if (j==1) {
cell.innerHTML = data[i].id}
if (j==2) {
cell.innerHTML = data[i].title}
if (j==3) {
cell.appendChild(removeRow)// Not working when replace data[i].field with button variable.
}
}

In your loop, j never gets to 3 (it says j < 3 in your second for statement).
If you change that to j < 4 or j <= 3 it should work.
Apart from that, you are only creating one BUTTON element, which you will be appending to all rows. Every time you append it to a row, it will be removed from the previous row it was on, so you'll still be left with just one button.

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);
}
}
}

Put a line break in a for loop that is generating html content

I have a for loop that is generating some HTML content:
var boxes = "";
for (i = 0; i < 11; i ++) {
boxes += "<div class=\"box\"><img src=\"unlkd.png\"/></div>";
}
document.getElementById("id").innerHTML = boxes;
I want to display 3 boxes in one row, then below them 2 boxes in one row, then 1, then 3 again, 2, and 1.
First i thought of using the if statement to check whether i > 2 to add a line break, but it will also add a line break after every box past the third one. Nothing comes to mind, and my basic knowledge of javascript tells me I'll have to make a loop for each row I want to make. Any advice?

I would use a different approch :
Use a array to store the number of item per row :
var array = [3, 2, 1, 3, 2];
Then, using two loops to iterate this
for(var i = 0; i < array.length; i++){
//Start the row
for(var j = 0; j < array[i]; ++j){
//create the item inline
}
//End the row
}
And you have a pretty system that will be dynamic if you load/update the array.
PS : not write javascript in a while, might be some syntax error
Edit :
To generate an id, this would be simple.
create a variable that will be used as a counter.
var counter = 0;
On each creating of an item, set the id like
var id = 'boxes_inline_' + counter++;
And add this value to the item you are generating.
Note : This is a small part of the algorithm I used to build a form generator. Of course the array contained much more values (properties). But this gave a really nice solution to build form depending on JSON

You can try something like this:
Idea
Keep an array of batch size
Loop over array and check if iterator is at par with position
If yes, update position and index to fetch next position
var boxes = "";
var intervals = [3, 2, 1];
var position = intervals[0];
var index = 0;
for (i = 0; i < 11; i++) {
boxes += "<div class=\"box\"><img src=\"unlkd.png\"/></div>";
if ((position-1) === i) {
boxes += "<br/>";
index = (index + 1) % intervals.length;
position += intervals[index]
}
}
document.getElementById("content").innerHTML = boxes;
.box{
display: inline-block;
}
<div id="content"></div>

var boxes = "",
boxesInRow = 3,
count = 0;
for (i = 0; i < 11; i ++) {
boxes += "<div class=\"box\"><img src=\"unlkd.png\"/></div>";
count++;
if(count === boxesInRow) {
boxes += "<br/>";
boxesInRow -= 1;
count = 0;
if (boxesInRow === 0) {
boxesInRow = 3;
}
}
}
document.getElementById("id").innerHTML = boxes;

var i;
var boxes = "";
for (i = 0; i < boxes.length; i++) {
boxes += "<div class=""><img src=""/></div>";
function displayboxes() {
"use strict";
for (i = 0; i < boxes.length; i++) {
out.appendChild(document.createTextNode(boxes[i] + "<br>"));
}
}
displayboxes(boxes);

Can someone explain me this function for creating grid with JS/jQuery?

I am learning jquery/js and I want to create grid made of divs. This is script doing just that, but I cant fully understand it..
function displayGrid (n) {
var size = 960;
var boxSize = (960 - 4*n)/n;
var wrap = $(".wrap").html("");
for (var j = 0; j < n; j++) {
for (var i = 0; i < n; i++) {
wrap.append( $("<div></div>").addClass("square").height(boxSize).width(boxSize) );
}
wrap.append($("<div></div>").css("clear", "both"));
}
}
In html I have empty wrap class.
Also, there is this function which I understand :)
function setGrid() {
var col = prompt("Enter number of columns: ");
displayGrid(col);
clean();
}
Thanks

Here is a basic line by line explanation..
function displayGrid (n) {
var size = 960; //MAX SIZE TO BE COVERED BY ALL DIVS ,EVEN IF THERE ARE N NO OF DIV'S
var boxSize = (960 - 4*n)/n; //FORMULA TO DECIDE WIDTH OF EACH DIV,CAN BE DIFFERENT TOO.
var wrap = $(".wrap").html(""); //THIS IS A DIV PROBABLY WHERE YOU ARE ADDING THE NEW SMALLER DIVS
for (var j = 0; j < n; j++) {
for (var i = 0; i < n; i++) {
//TWO FOR LOOPS ,1 IS FOR LOOP THROUGH ROWS , OTHER FOR COLUMNS.
wrap.append( $("<div></div>").addClass("square").height(boxSize).width(boxSize) );
//THIS APPENDS A BLANK DIV TO DIV WITH CLASS .WRAP, AND ADDS A CLASS SQAURE, AND ALSO WITH WIDTH AND HEIGHT PROPERTY SETS EACH DIVS PROPERTY OF WIDTH AND HEIGHT.
}
wrap.append($("<div></div>").css("clear", "both"));
//THIS SHOULD BE TO MOVE TO NEXT COLUMN.
} }

Here is commented code:
//n-> seems to be the number of times to divide the grid
//1-> will get 1 square
//2-> will get 4 square
//3-> will get 9 square and so on... n^2
function displayGrid (n) {
var size = 960;
//This seems to calculate size of the squares to fit inside the give area
// of 960: 960/4
//-4*n I guess is the border size to remove from each square in order to have an exact match
var boxSize = (960 - 4*n)/n;
//this get the grit container, empties it
var wrap = $(".wrap").html("");
//now print each square on the document
for (var j = 0; j < n; j++) { //columns
for (var i = 0; i < n; i++) { //rows
wrap.append( $("<div></div>").addClass("square").height(boxSize).width(boxSize) );
}
//this is done to go in the next row, since we are using divs...
wrap.append($("<div></div>").css("clear", "both"));
}
}

How to find a table's column count using the DOM?

For row count using DOM, we have tablename.rows.length to get number of rows, but we don't have 'cols.length' for column count.
How can we find the number of columns (only using the DOM)?

I think you can use cells to calculate the column, assuming that the number of column of first row will be same for all
tablename.rows[0].cells.length;

I would use the table's rows property and the first row's cells property and total the colSpan property of each cell in the row. This will work in all major browsers back to IE 4 and should be pretty fast.
Demo: http://jsfiddle.net/Gtdru/
Code:
function getTableColumnCount(table) {
var columnCount = 0;
var rows = table.rows;
if (rows.length > 0) {
var cells = rows[0].cells;
for (var i = 0, len = cells.length; i < len; ++i) {
columnCount += cells[i].colSpan;
}
}
return columnCount;
}

There isn't such a concept in the DOM.
You could try and count the max number of td and th in tr :
var max = 0;
$('#tableId tr').each(function(){max=Math.max(max, $('td,th', this).length)});
Demonstration
If you want to take into account the colspan, it's a little heavier :
var max = 0;
$('#tableId tr').each(function(){
var inTr = 0;
$('td,th', this).each(function() { inTr += parseInt($(this).attr('colspan')) || 1;});
max = Math.max(max,inTr);
});
Demonstration

This will work with complex table headers :
$($('#table_id_here tbody tr')[0]).find('td').length

Here you go:
$(function() {
var colCount = 0;
$('tr:nth-child(1) td').each(function () {
if ($(this).prop('colspan')) {
colCount += +$(this).prop('colspan');
} else {
colCount++;
}
});
alert(colCount);
});​
jsfiddle

A very simple way to get the number of possible cols in any table is using the following (vanillaJS) function:
/**
* Calculates the number of columns based on any row using colSpan attribute.
*
* #param {HTMLElement} table : The table element to be count.
*
* #return {int} The number of columns this table has.
*/
var getTableColSpan = function getTableColSpan(table) {
var colSpan = 0; // initialize counter
var trs = table.querySelectorAll('tr'); // get firt tr cells.
for (var j = 0; j < trs.length; j++) {
var tr = trs[j];
var tds = tr.cells;
var trColSpan = 0; // initialize counter
// loops between columns and gets each one's colSpan
for (var i = 0; i < tds.length; ++i) {
trColSpan += tds[i].colSpan;
}
colSpan = trColSpan > colSpan ? trColSpan : colSpan;
}
return colSpan;
};