We Keep Coding

Adapting merge cells in InDesign script

I found this script on SO, which is very close to what I need. But instead of it merging the cells with the one above I need it to merge with the cell to left of any empty cell.
I have tried to experiment with it and manged to get it to merge horizontally once but it merge three cells that weren't empty into one.
Would be greatful for any help
THanks
var myDoc = app.activeDocument;
myPage = myDoc.pages;
for (var p=0; myPage.length>p; p++){
try{
var myTable = myPage[p].textFrames.everyItem().tables.everyItem();
if (myTable.constructor.name == 'Table'){
for (var t = myTable.cells.length - 1; t >= 0; t--)
{
if (myTable.cells[t].contents==""){
var w = myTable.columns.length;
myTable.cells[t-w].merge(myTable.cells[t]);
}
}
}
}
catch(e){}
}

I found a solution
var i, j, cells;
// Get all the rows in the document
var rows = app.documents[0].stories.everyItem().tables.everyItem().rows.everyItem().getElements();
for (i = 0; i < rows.length; i++) {
// Get all the cells in a row
cells = rows[i].cells.everyItem().getElements();
for (j = cells.length-1; j >= 1; j--) {
if (cells[j].contents == '') {
cells[j-1].merge (cells[j]);
}
}
}

How to create html table with 100 unique td using javascript

I'm trying to draw game board with 100 places using javascript.
I thought a table would be perfect for that - so every line will be tr, and every square is td. I manage to do this by this code above.
The problem that although I get my desired board visually – i actually just duplicate my tr 10 times.
I'm trying to give each square a unique id.
I need some guidance here.
function createBoard() {
var table = document.getElementById("puzzleBoard");
table.innerHTML = "";
for (var r = 0; r < 10; r++) {
var newRow = document.createElement("tr");
table.appendChild(newRow);
for (var c = -1; c < 9; c++) {
var newCell = document.createElement("td");
var cellName = (c + 1);
newRow.appendChild(newCell);
var newPiece = document.createElement("div");
//newPiece.setAttribute("id", "cell-0"+cellName;);
newPiece.innerHTML = "cell-0" + cellName;
newCell.appendChild(newPiece);
}
}
}

Try cellName = (c + 1) * (r + 1).

newPiece.innerHTML = `cell-${cellName}-row-${r}`;

The simplest unique identifier:
cellName++
Here the code:
function createBoard() {
var table = document.getElementById("puzzleBoard");
table.innerHTML = "";
var cellName = 0;//<-- initialization
for (var r = 0; r < 10; r++) {
var newRow = document.createElement("tr");
table.appendChild(newRow);
for (var c = -1; c < 9; c++) {
var newCell = document.createElement("td");
newRow.appendChild(newCell);
var newPiece = document.createElement("div");
newPiece.setAttribute("id", "cell-"+cellName);//<-- set id
newPiece.innerHTML = "cell-"+cellName;
cellName++;//<-- plus 1
newCell.appendChild(newPiece);
}
}
}
Now we have a 10x10 matrix in which we can perform easier math operations (you are doing a game). Each cell have a number from 0 to 99.

Unable to append row through javascript function

Im trying to append a row to a table. And this is the code that i tried
function load() {
for (var k = 0; k < 1; k++) {
var myTableDiv = document.getElementById("pID");
var tableBody = document.getElementById("tBody");
var table = document.getElementById('pTable');
table.appendChild(tableBody);
for (var i = 0; i < 3; i++) {
var tr = document.getElementById('RiskRow');
tableBody.appendChild(tr);
for (var j = 0; j < 1; j++) {
var element1= document.getElementById('RiskTD');
var element2= document.getElementById('severityTD');
var element3= document.getElementById('mitigationTD');
var element4= document.getElementById('contingencyTD');
var element5= document.getElementById('riskStatusTD');
tr.appendChild(element1);
tr.appendChild(element2);
tr.appendChild(element3);
tr.appendChild(element4);
tr.appendChild(element5);
}
}
myTableDiv.appendChild(table);
}
}
But this results in appending only one row. I need multiple rows to be added that follows the for loop. Im not sure where i stuck up.

Regardless of the redundant loops you have there (var k = 0; k < 1 will always perform once...), the reason you're seeing this behavior is because you're trying to append the same element over and over. This will cause the element to be moved, rather than copied.
Have a look at document.cloneNode

Problems using x.length within for loop

I'm having problems trying to dynamically generate an HTML table based on input (column/row) values.
When I hardcode the values in the loop below (i.e. instead of using the prompt), it creates the correct number of cells. However, when using x.length within the loop, something isn't working correctly.
works correctly:
function createTable() {
// declare variables
var body = document.body,
table = document.createElement('table');
// Begin creating table
// for each row
for(var r = 0; r < 8; r++) {
// create row
var tr = table.insertRow();
// for each column
for(var c = 0; c < 8; c++) {
// create column
var td = tr.insertCell();
td.appendChild(document.createTextNode('Cell'));
}
}
// append table to body
body.appendChild(table);
}
createTable();
does not create correct cells based on variable input
function createTable() {
// declare variables
var body = document.body,
table = document.createElement('table'),
rows = prompt("enter rows"),
columns = prompt("enter columns");
// Begin creating table
// for each row
for(var r = 0; r < rows.length; r++) {
// create row
var tr = table.insertRow();
// for each column
for(var c = 0; c < columns.length; c++) {
// create column
var td = tr.insertCell();
td.appendChild(document.createTextNode('Cell'));
}
}
// append table to body
body.appendChild(table);
}
createTable();

rows and columns are strings, that's the only reason why they have a .length. You seem to want to use them as parsed numbers, without any lengths:
var body = document.body,
table = document.createElement('table'),
rows = parseInt(prompt("enter rows"), 10),
columns = parseInt(prompt("enter columns"), 10);
for (var r = 0; r < rows; r++) {
var tr = table.insertRow();
for (var c = 0; c < columns; c++) {
var td = tr.insertCell();
td.appendChild(document.createTextNode('Cell'));
}
}
body.appendChild(table);

Use parseInt(rows) and parseInt(columns). This functions return an integer but you must check if the input is really an string-represented integer value.

Making grid set size no matter how many words are in it

I have a list of 3 letter words that dynamically generate a grid.
The problem is I need a 6x6 grid, and if there is not enough words in the list to facilitate a 6x6 (12 words) then it won't be the size needed, and only be a grid as big as the words in it.
How can I make it so it always produces a 6x6 grid, randomly generates positions for the words and fills the gaps with empty cells?
var listOfWords = {};
var ul = document.getElementById("wordlist");
var i;
for(i = 0; i < ul.children.length; ++i){
listOfWords[ul.children[i].getAttribute("data-word")] = {
"pic" : ul.children[i].getAttribute("data-pic"),
"audio" : ul.children[i].getAttribute("data-audio")
};
}
console.log(listOfWords);
var shuffledWords = Object.keys(listOfWords).slice(0).sort(function() {
return 0.5 - Math.random();
}).slice(0, 12);
var guesses = {}
console.log(shuffledWords);
var tbl = document.createElement('table');
tbl.className = 'tablestyle';
var wordsPerRow = 2;
for (var i = 0; i < Object.keys(shuffledWords).length - 1; i += wordsPerRow) {
var row = document.createElement('tr');
for (var j = i; j < i + wordsPerRow; ++j) {
var word = shuffledWords[j];
guesses[word] = [];
for (var k = 0; k < word.length; ++k) {
var cell = document.createElement('td');
$(cell).addClass('drop').attr('data-word', word);
cell.textContent = word[k];
// IF FIREFOX USE cell.textContent = word[j]; INSTEAD
row.appendChild(cell);
}
}
tbl.appendChild(row);
}
document.body.appendChild(tbl);
I have tried this, but cannot get it to work....
while(listOfWords.length < 12)
listOfWords.push(" ");

Did you try creating the table with the required size before, and then putting the word to a random td and tr?