Hey there! I've got a bit of a coding puzzle. I can successfully select a td and change the image inside it, but I also need to display the id of the selected td. The catch is that my function first has to select the image to change it. Is there a way to achieve both tasks? I want the click event to select the image, change it, and then display an alert with the td id. Check out the code below!
Here is the jQuery code:
$(document).ready(function(){
$("td img").click(function() {
$(this).attr('src', 'images/d.gif');
alert($(this).attr("td id"));
return false;
});
});
And here is the HTML:
<div id='plan'>
<table>
<tr>
<td class='n' id='a1'><img src='images/a.gif'/></td>
<td class='n' id='a2'><img src='images/a.gif'/></td>
<td class='n' id='a3'><img src='images/a.gif'/></td>
<td class='n' id='a4'><img src='images/a.gif'/></td>
<td></td>
<td class='n' id='a6'><img src='images/a.gif'/></td>
<td class='n' id='a7'><img src='images/a.gif'/></td>
<td class='n' id='a8'><img src='images/a.gif'/></td>
<td class='n' id='a9'><img src='images/a.gif'/></td>
</tr>
<tr>
<td class='n' id='b1'><img src='images/a.gif'/></td>
<td class='n' id='b2'><img src='images/a.gif'/></td>
<td class='n' id='b3'><img src='images/1.gif'/></td>
<td class='n' id='b4'><img src='images/1.gif'/></td>
<td></td>
<td class='n' id='b6'><img src='images/1.gif'/></td>
<td class='n' id='b7'><img src='images/a.gif'/></td>
<td class='n' id='b8'><img src='images/a.gif'/></td>
<td class='n' id='b9'><img src='images/a.gif'/></td>
</tr>
<tr>
<td class='n' id='c1'><img src='images/1.gif'/></td>
<td class='n' id='c2'><img src='images/1.gif'/></td>
<td class='n' id='c3'><img src='images/a.gif'/></td>
<td class='n' id='c4'><img src='images/a.gif'/></td>
<td></td>
<td class='n' id='c6'><img src='images/1.gif'/></td>
<td class='n' id='c7'><img src='images/1.gif'/></td>
<td class='n' id='C8'><img src='images/a.gif'/></td>
<td class='n' id='C9'><img src='images/a.gif'/></td>
</tr>
<tr>
<td class='n' id='d1'><img src='images/1.gif'/></td>
<td class='n' id='d2'><img src='images/1.gif'/></td>
<td class='n' id='d3'><img src='images/1.gif'/></td>
<td class='n' id='d4'><img src='images/1.gif'/></td>
<td></td>
<td class='n' id='d6'><img src='images/1.gif'/></td>
<td class='n' id='d7'><img src='images/1.gif'/></td>
<td class='n' id='d8'><img src='images/1.gif'/></td>
<td class='n' id='d9'><img src='images/1.gif'/></td>
</tr>
<tr>
<td class='p' id='e1'><img src='images/1.gif'/></td>
<td class='p' id='e2'><img src='images/1.gif'/></td>
<td class='p' id='e3'><img src='images/1.gif'/></td>
<td class='p' id='e4'><img src='images/1.gif'/></td>
<td></td>
<td class='p' id='e6'><img src='images/a.gif'/></td>
<td class='p' id='e7'><img src='images/a.gif'/></td>
<td class='p' id='e8'><img src='images/1.gif'/></td>
<td class='p' id='e9'><img src='images/1.gif'/></td>
</tr>
</table>
</div>