Storing and accessing data of a div inside a table cell - jquery-ui

Question

http://fiddle.jshell.net/kBFU7/2/
In the code, I have created a dynamic table through jQuery.
I also have a div for each table cell.
I wish to store and access data of this div, eg, the row and column for each of it.
I would hence like to ask for some recommendations on how I should go about storing this data.
I have tried creating a span for each div to store info in it following the suggestions from this link http://time2hack.blogspot.sg/2012/11/jquery-store-access-relative-info-within-HTML-element.html#axzz2Ee3iLxCt but it did not seem appropriate and I have failed at accessing back the info.
I would appreciate it if someone could just give me some recommendations which I could try out.

Answer 1

So basically you want to create a dynamic table and access each of the TDs and its data.
In order to do that, you don't need any div or span to place inside those TDs to access their content (if that is all that you want). The simplest way to do so is to assign an id to each of these TDs according to their Row and Column position. That way you can access each of them in a loop or directly or what not.
below I've written a super simple way to achieve it. Of course you can customize or enhance it according to your need. but then you should get the idea right?
(I am using ur code to do that)
$(document).ready(function() {
createTable($("#tb1"));
function createTable(tbody){
if (tbody == null || tbody.length < 1) return;
for(var r=0;r<5;r++){
var trow=$("<tr>");
for(var c=0; c<5;c++){
var tcol=$("<td>")
tcol.attr("id","row"+r+"col"+c); /// assign id to each td
var cellText = "row " +r + " col " +c
$("<div>")
.text(cellText)
.appendTo(tcol)
tcol
.appendTo(trow)
}
trow.appendTo(tbody);
}
}
});
so basically you did this:
<td id="row1col1"></td>
<td id="row1col2" ></td>
now whenever you want to access any of the cells do this
$('#row1col1').text();
or
$('#row1col1').html();
​
you can access the cells in a loop like
for(var r=0;r<5;r++){
for(var c=0;c<5;c++){
var cellValue= $('#row'+r+"col"+c).text() // or .html()
makeAjaxRequest(cellValue); /// send to server or whatever
}
}

Answer 2

when create a div add an unique id:
.attr("id","cell-" + r+ "-" + c)
try this code on a button with input:
$("#btn").bind("click", function(){
var r = $('#row').val();
var c = $('#column').val();
var data = $('#data').val();
$('#cell-' + r + '-' + c).text(data);
});
Try it on my fiddle:
http://jsfiddle.net/kBFU7/4/

Answer 3

you'll have to pass this value as array and have to receive it on back-end
go on this link
http://www.aspdotnet-suresh.com/2012/07/aspnet-save-dynamically-created-control.html

Answer 4

To access the data attributes in the elements; there can be two ways. the jQuery access that data by
$('#table_cell_div').data('info');
But this function only works if the DOM is created before
$(document).ready();
i.e the document elements created by JS are not accessible in data() function of jQuery
But to access those elements and attributes after the DOM has become ready; you can access that data by following code
$('#table_cell_div').attr('data-info');