Question

I have a table, with rows which all have a cell of a div with a dynamically generated id in the format of btn-insertidhere.

When the table row is selected, I want to select this div id, then remove a class and change it to another one. This is down to me wanting to have a button image change from an add symbol to a delete symbol which when clicked.

javascript code:

  $('*[class^=day] tbody tr[id^=band]').live('click', function() {
        var DivId = $(this).find('div.add').attr('id');
        alert(DivId);

        $('DivId').removeClass('add').addClass('del');
        $('table#fri_myTimes tbody').append($(this)).fadeIn(1000);
        return false;
});

This is an html snippet of the dynamically generated code:

<tr id="band-Modest-Mouse">
<td>Modest Mouse</td>
<td>15:25:00</td>
<td>16:10:00</td>
<td>45</td>
<td><div id="btn-Modest-Mouse" class="add">&nbsp;</div></td>
</tr>

As you can see i want to change the ‘add’ class to a delete ‘class’. All the table rows on the table is generated like this, so as you can see i’ve gone for the wildcard approach, which seems to work because the alert shown, shows the correct div id. I just need to change the class!

Thanks!

Answer 1

You either have to get the jq object for the div by removing the ‘.attr(id)’ part

var DivId = $(this).find('div.add');
...
$(DivId).removeClass('add').addClass('del');

or add a # in the divId selector

$("#" + DivId).removeClass('add').addClass('del');