CODEWITHSUNDEEP
javascript
user947668
user947668

Reputation: 2728

storing table cell content into js array

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?

Upvotes: 1

Views: 4179

Answers (2)

Michael Berkowski
Michael Berkowski

Reputation: 270617

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;

Upvotes: 2

Alex_B
Alex_B

Reputation: 848

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.

Upvotes: 1

Related Questions