create html using jquery

Question

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>

Why do you need individual ID's if you are using jQuery to track clicks. When the click event fires, you will already have an object (using the keyword "this"), for which to grab data or whatever you need to do. The only time I have done this, is when there is a need to correlate data across different html tags. So for example if they click button1, then they need to show the content for div1. — MindingData
– MindingData, Commented Sep 16, 2010 at 2:15
Hi Umair, This is the first time I posted here and if I made some mistake I apologize. — t0mcat
– t0mcat, Commented Sep 16, 2010 at 14:24

Peter Ajtai · Accepted Answer · 2010-09-16 05:38:05Z

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

Hey Peter, thanks for the sample solution. I really like jsFiddle tool as well. Nice way to learn jQuery.

RMorrisey · Accepted Answer · 2010-09-16 02:19:32Z

1

You could use something like this:

(Edited, per comments)

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

edited Sep 16, 2010 at 2:19

answered Sep 16, 2010 at 2:12

RMorrisey

7,73911 gold badges59 silver badges77 bronze badges

4 Comments

Peter Ajtai Over a year ago

$(this).attr('id', 'display' + i++); and you can remove the i++; on the next line..... but really you should be using .each(function(index) { $(this).attr('id', 'display' + index); });

Nick Craver Over a year ago

@Peter .each() has an indexer already, just use it, e.g.: $('div.displayClass').each(function(i) { this.id = 'display' + i; });

RMorrisey Over a year ago

Thanks, Peter, I didn't know that the index was supplied. I was just doing it from memory! I'll revise my answer. +1

Peter Ajtai Over a year ago

@Nick - I actually tacked the index solution on before I saw your reply ;) Thanks for the suggestion.

Collectives™ on Stack Overflow

create html using jquery

2 Answers 2

Simplified example:

jsFiddle example

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Simplified example:

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related