Question

I need to store table cell content into array using tr and td indexes like this:

myArray[tr_idx][td_idx]='value';

It is not required to store data of all of cells in array but only several with a special content, but if i use indexes as a keys of the array i’ll have many empty array elements.

e.g.

myArray[2][3]='data1';
myArray[4][3]='data2';

alert (myArray.toSource()) -> [, , [, , , "data1"], , [, , , "data2"]]

maybe there is another suitable way of storing such type of data?

Answer 1

Why not just store them as individual 2-item arrays [row,col]? Since the table cells are already accessible via tableElement.rows[].cells[], you can use the 2 indices to access them from the table.

var storedCells = [];
// Store row 2, column 3
storedCells.push([2,3]);

Access with:

// Table row:
storedCells[0][0]
// Table column
storedCells[0][1]

//As in :
tableElement.rows[storedCells[0][0]].cells[storedCells[0][1]].innerHTML = "New cell value!"

Or even cleaner, if you prefer to use objects rather than arrays:

storedCells.push({row: 2, column: 3});
storedCells.push({row: 4, column: 6});

Accessed with:

tableElement.rows[storedCells[0].row].cells[storedCells[0].column].innerHTML = "New cell value!";

Finally, if you don’t actually need the row/column indexes, but rather the DOM nodes themselves, just push those onto your array.

var storedCells = [];
// Save references to some individual <td> nodes
storedCells.push(tableElement.rows[1].cells[2]);
storedCells.push(tableElement.rows[4].cells[6]);

They are then trivially modified:

// Set the value of the second element:
storedCells[1].innerHTML = "New content!";

Update after comment:

If you need to be able to attach the cell coordinates to a new value from the backend, a good solution would be to expand the object {} example above to include a value attribute. The server can pass back the new value in JSON.

storedCells.push({row: 2, column: 3, value: ""});
storedCells.push({row: 4, column: 6, value: ""});

Your backend should send a JSON response back to the script containing the same type of array of objects, where value: has been populated with the new cell value. You can then pass it back into the table with:

// Pass the value attribute received from JSON into the cell's contents
tableElement.rows[storedCells[0].row].cells[storedCells[0].column].innerHTML = storedCells[0].value;