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