Get id of an element by js in a module item

Question

I don't know if i choose the correct title.

Here's my probleme, I've created a module in wich I can put my js/css (http://img4.hostingpics.net/pics/586674moduleJs.png) and I would like to get the id of my html elements. Sharepoint is adding some kind of matrix characters to my elements ID's and each of them look similar to this : ctl40_g_fa43dd10_b395_40e7_98cd_a52585a208c5_Timesheet

So i used to get the id in my webpart using The CliendID of my item. Here's an example of what I was doing before moving my js to a separate file. (I was doing js/style in the webpart acsx file but i got some issues and i had to move my js/style in a separate folder).

js

$("#<%#Timesheet.ClientID%>").find("tbody").find("tr").each(function () {
        if ($(this).attr("data-name") == "timesheetEntryTotal") {
            $(this).before(tr);
            return false;
        }
    });

css

#<%#Timesheet.ClientID%> > tbody > tr > td {
    height: 30px;
    background-color: #F6F6F6;
}

But now that I moved my js/css to a separate folder I can't user <%...%> anymore. So how I can get the ID of my elements now?

Please help. Thank you in advance.

Answer 1

I've found another solution is to use the HTML5 custom attribute like data-name.

So instead of getting the id like this $("#<%#Timesheet.ClientId%>"), I now do $("table[data-id='Timesheet']")

Same thing for the css selector.

table[data-id="Timesheet"] > tbody > tr > td {
        height: 30px;
        background-color: #F6F6F6;
}

Answer 2

If you're using jQuery to select element, you could use '$' for ends with.

$("table[id$='Timesheet']")

You could do similar for CSS:

table[id$="Timesheet"] > tbody > tr > td {
    height: 30px;
    background-color: #F6F6F6;
}