[jQuery] How to get row id value
I am trying to get the ID attribute of a table row so I can manipulate
various pieces of information about the row. I'm new to JQuery, so I
may be approaching this all wrong. Any help and advice would be
appreciated.
Here is an HTML snippet:
<tr class="bco-row" id="co-101-01">
<td class="nowrap">
<a href="#" class="toggle-slide">
<img src="plus.gif" alt="expand" title="expand" width="9"
height="9" />
</a> 101 / 01
</td>
<td><ul class="bci">
<li><a href="#">Title goes here</a></li>
<li><a href="#">Second line item</a></li>
<li>
<div class="bco-add-info" id="co-101-01-add-info">
<ul class="bci">
<li>
<label for="co-101-01-round"><strong>Round:</strong></label>
<select name="co-101-01-round" id="co-101-01-round">
<option value="3">3</option>
<option value="4">4</option>
</select>
<label for="co-101-01-points"><strong>Points:</strong></label>
<input name="co-101-01-points" type="text" id="co-101-01-
points" size="3" maxlength="5" />
</li>
</ul>
<input name="co-101-01-view-status" id="co-101-01-view-status"
type="hidden" value="closed" />
</div>
</li>
</ul></td>
<td class="nowrap">Other info</td>
</tr>
This is an example of a row (there are many) and the main <tr> tag has
an ID value. That ID value is generated by the application.
Here is what I want to do. In the first cell of the row, there is
'plus' icon. When the user clicks on that icon, I want to slide out
the div with the ID 'co-101-01-add-info' only as well as change other
things about the row (e.g., highlight the row, change the value of the
hidden input element with ID 'co-101-01-view-status').
I have written the following Javascript:
$(document).ready(function(){
$(".toggle-slide").click(
function(){
var coId = 'co-101-01';
$("#" + coId + "-add-info").slideToggle(300,
function(){
$("#" + coId + " td").toggleClass("highlight");
}
);
}
);
});
This javascript successfully slides out the <div> and highlights the
table row, but I had to hard-code the value of the ID for the parent
<tr>. I have tried numerous permutations of parent(), parents() and
have not been successful.
Am I approaching this all wrong? How can I make sure I am only
affecting the row that was clicked?
Thanks in advance for your help.
~Howard