create html using jquery

Question

Hi experts,

First of all let me know if my question is completely vague or doesnt make any sense.

What I am trying to do is:

I Have a page which displays some blocks of data (Block can be considered as a row of data). Each block will be seperate <DIV> and inside this <DIV> I have Nested two tables.

My question, How do I populate or generate a different "id" for every html tag thats responsible for display. I need to do this because I am using Jquery to process user click events and to generate json data which will be sent back to the server.

Also the data for the screen will come as a json data type. Sample mock of one <DIV> is attached

<div id="1" class="RedColor" >
<table id="tab1" class="recordTable">
<tr>
<td id="studentName1" class="studentName">
<table id="innertab1" border="0" width="100%" cellpadding="3">
 <tr>
  <td id="" class="error1" width="172">&nbsp;</td>
  <td id="rollNumber1" class="rollNumber" width="50">12</td>
  <td id="" class="studentName" colspan="2">ABC XYZ</td>
 </tr>

</table>
</td>
<td width="64" valign="top">

</td>
</tr>
</table>
</div>

Answer 1

You could use something like this:

(Edited, per comments)

$('div.displayClass').each(function(index, Element) {
 $(this).attr('id', 'display' + index);
});

Answer 2

I would handle this problem differently.

I would assign a unique ID only to each "block" of data. Within that block I would only use classes to identify each element of the data.

Each class within one block would be unique.

So this is what my HTML would look like (note the class rename to make them unique within each data block)

<div id="data1" class="RedColor" >
    <table class="recordTable">
        <tr>
            <td class="studentNameData">
                <table class="innerTab" border="0" width="100%" cellpadding="3">
                    <tr>
                        <td class="studentName"> ... </td>
                        ...
                </table>
            </td>
        </tr>
    </table>
</div>
<div id="data2" class="RedColor" >
    <table class="recordTable">
        ...

You could even get rid of the div wrapper and put the unique ID on each outer table.

Now each piece of data can be uniquely identified using the form: [ Data Block ID ] [ Class Name ].

In jQuery that can be done using the .find() method.

For example to retrieve the studentName from data block 3 I would use

 $("#data3").find(".studentName").text();

I would iterate over the data you get from the server to populate the tables. Here is an extremely simplified version just to illustrate what I described. I removed the outer DIV wrapper and added the unique ID to the table, just so you can see what that would look like:

Simplified example:

// Function to add an empty table with class names
var $addTable = function() {
    // The table could be built with multiple methods too.
    return $('<table><tr><td class ="name"></td></tr></table>');
}   

$(function() {

    // The attribute = selector
    $("input[value='Get data']").click(function() {

        // Loading notice
        $("#showData").html("Loading...");

        // The AJAX call to get the data using POST
        $.post('/ajax_json_echo/', function(data) {

            // Clear loading notice
            $("#showData").html("");

            // Iterate through data
            //   and create a table for each item.            
            $.each(data, function(index, value) {

                // This is the div's unique ID
                var $id = "data" + index;

                $addTable().attr("id", $id).appendTo("#showData");
                $("#" + $id).find(".name").html(value);
            });
        });
    });
});​

jsFiddle example