Take the 2-minute tour ×

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


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.



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

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

share|improve this question
use an object to avoid empty elements.. you would not have the length property, but it would be useless anyway since some items would be empty. myObject = {} –  lostsource Nov 27 '12 at 14:51
add comment

2 Answers

up vote 2 down vote accepted

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

Access with:

// Table row:
// Table column

//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

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;
share|improve this answer
Michael, thank you for such detailed response. Actually cell data is used as variable which passes to backend script. So when js receives response from backend script cell should be filled with new data. So that is why cell position and cell data are important. I'm not sure how can i use individual 2-item array for this purpose? –  user947668 Nov 27 '12 at 15:04
@user947668 See addition above. –  Michael Berkowski Nov 27 '12 at 15:12
Absolutely brilliant! Thank you very much! –  user947668 Nov 27 '12 at 15:28
add comment

Not sure if this is the right answer but you could try to check if cells are empty before pushing them into the array. In the loop place a an if statement that will check the value of the cell and compare it to the value you require. This way you should end up with just an array of value and no empties. But you may need to record the index as well then.

share|improve this answer
add comment

Your Answer


