How to create unique ids in dynamic table?

Question

I'm trying to get unique id for each table row on my input fields and buttons. Currently all ids in my table are the same. I want to set unique id for each input field ans save button. Here is my HTML code:

<cfoutput query="qryTable" group="DateSch">
    <tbody> 
        <tr>
            <td rowspan="#StartTime#">#DateFormat(DateSch,'mm/dd/yyyy')#</td>
        </tr>
        <cfoutput>
            <tr>
                <td>#TimeFormat(StartTime,'hh:mm tt')#</td>
                <td>#TimeFormat(EndTime,'hh:mm tt')#</td>
                <td>
                    <label>
                        <input type="text" name="email" id="email" class="email" placeholder="example@gmail.com">
                        <input type="button" id="slot" name="slot" class="slot" value="Save" onClick="saveSlot('#TimeSlotID#')">
                    </label>
                </td>
            </tr>
        </cfoutput>
    </tbody>
</cfoutput>

As you can see from code above my input field ids are all email and my button ids are slot. How I can make them unique for each row? If anyone can help please let me know.

How are the rows generated? It's at the generation stage that you set the unique ids using e.g. a simple counter - we'd need to see the code that creates the rows — StudioTime, Jan 11 '16 at 17:20
@user3023588 That's potentially going to make this a ColdFusion question. You could certainly create a bunch of IDs by javascript, but if ColdFusion is generating the table it's likely better to create the IDs as part of that. — Mic, Jan 11 '16 at 17:25

score 2 · Accepted Answer · answered Jan 11 '16 at 18:19

2

Add the currentRow to the ID

<cfoutput query="qryTable" group="DateSch">
<tbody> 
    <tr>
        <td rowspan="#StartTime#">#DateFormat(DateSch,'mm/dd/yyyy')#</td>
    </tr>
    <cfoutput>
        <tr>
            <td>#TimeFormat(StartTime,'hh:mm tt')#</td>
            <td>#TimeFormat(EndTime,'hh:mm tt')#</td>
            <td>
                <label>
                    <input type="text" name="email" id="email#currentRow#" class="email" placeholder="example@gmail.com">
                    <input type="button" id="slot#currentRow#" name="slot" class="slot" value="Save" onClick="saveSlot('#TimeSlotID#')">
                </label>
            </td>
        </tr>
    </cfoutput>
</tbody>
</cfoutput>

answered Jan 11 '16 at 18:19

Matt Busche

14,216
5
36
61

Is that the best way to do that? I know for currentRow but I used that when I do insert usually. Thanks for help. – espresso_coffee Jan 11 '16 at 18:20
What are you inserting? Using currentRow is the most efficient way to do this. – Matt Busche Jan 11 '16 at 18:21
I was just wondering, I have not done any inserting in this case but I remember in the past I used currentRow for inserting. – espresso_coffee Jan 11 '16 at 18:22
Whether or not this is the best way or not depends on what you are attempting to do. If all you really need is to make the id's unique, this is the simplest way. However, once you submit the form, all those fields named email may not be what you want. – Dan Bracuk Jan 11 '16 at 18:41

score 0 · Answer 2 · answered Jan 11 '16 at 17:28

0

To dynamically add unique id to the row use uniqueId or just a counter with some specific prefix.
To make input ids unique add entity id or the row number to them.

answered Jan 11 '16 at 17:28

Qwertiy

19,681
15
61
128

score 0 · Answer 3 · edited May 23 '17 at 12:23

0

There is another thread here: Create GUID / UUID in JavaScript?

If you cannot find a solution there: I got a UUID class from Erik Giberti (AF-Design). While his file is no longer available for downloading, I would be willing to provide it to.

edited May 23 '17 at 12:23

Community

1
1

answered Jan 11 '16 at 17:33

hherger

1,660
1
10
13

1

You gave your question the label "Javascript". Are you sure you need a javascript solution? Or can the unique ids be generated where your code is generated? – hherger Jan 11 '16 at 17:36

How to create unique ids in dynamic table?

3 Answers3