methuselah methuselah - 3 months ago 21
Javascript Question

Making table cells clickable

I currently have a table of about 30 rows and I would like to make

<td>
clickable in each case:

<tr height="100px" align="center">
<?php do { ?>
<td style="background-color: <?php echo $row_dd1['colour']; ?>;">
<form action="pay.php?id=<?php echo $row_dd1['dNo']; ?>&user=<?php echo $username; ?>" method="post">
<input type="hidden" id="<?php echo $row_dd1['dNo']; ?>"><input type="hidden" value="<?php echo $username; ?>">
<button type="submit" class="link" id="t<?php echo $row_dd1['dNo']; ?>"><span><?php echo $row_dd1['dNo']; ?></span></button></form>
</td>
<?php } while ($row_dd1 = mysql_fetch_assoc($dd1)); ?>
</tr>


How do you make the table cell clickable? I would like it to have the same link as the form action that I have used which is:

<form action="pay.php?id=<?php echo $row_dd1['dNo']; ?>&user=<?php echo $username; ?>" method="post">

Answer

This is a perfect example of where to use .delegate(), like this:

$("#myTableID").delegate("td", "click", function() {
  $(this).find("form").submit();
});

.delegate() attaches one handler to the <table>, rather than n handlers, one per cell. If you just want to navigate to the URL, it would look like:

$("#myTableID").delegate("td", "click", function() {
  window.location.href = $(this).find("form").attr("action");
});
Comments