PDA

View Full Version : Resolved Javascript tr mousovers



dniwebdesign
Nov 20th, 2009, 06:11 AM
Not sure if this is possible or not but figured I'd ask. I have a table with mouseover and onclick events on the table rows <tr>. Which works just fine and the way I want them to. However, I want to disable the onclick event for the row on one cell, which has specific action links (if you catch my drift). I have included the code below.

The Simple JavaScript:

<script type="text/javascript">
function ChangeColor(tableRow, highLight) {
if (highLight) {
tableRow.style.backgroundColor = '#dcfac9';
}
else {
tableRow.style.backgroundColor = 'white';
}
}

function DoNav(theUrl) {
document.location.href = theUrl;
}
function doPay(invoiceId) {
alert("Pay Invoice "+invoiceID);
}
</script>

The Table Row (multiple rows are generated via PHP and MySQL)

<tr onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="DoNav('<?php echo 'ViewInvoice.php?InvoiceID='.$row["id"].''; ?>');" style="cursor:pointer">
<td style="padding: 4px; border-bottom: 1px solid #B7CBCF;"><?php echo '<a href="ViewInvoice.php?InvoiceID='.$row["id"].'">'.$row["invoice_number"].'</a>'; ?></td>
<td style="border-bottom: 1px solid #B7CBCF;"><?php echo date("F j, Y",$row["invoice_date"]); ?></td>
<td style="border-bottom: 1px solid #B7CBCF;"><?php echo $total.number_format($row["invoice_total"]*-1,2); ?></td>
<td style="border-bottom: 1px solid #B7CBCF;"><?php echo $due.number_format($total_due*-1,2); ?></td>
<td style="border-bottom: 1px solid #B7CBCF;"><?php echo $paid.number_format($row["invoice_paid"],2); ?></td>
<td disable='disable' style="border-bottom: 1px solid #B7CBCF;"><?php echo "<a href='#' onclick='doPay(".$row["id"].");'>Pay</a> Edit Delete"; ?></td>
</tr>

At present time I can click on the "Pay" link and the window will alert, however it will also view the Invoice via the onclick for the <tr> which I do not want, while clicking on the links. :-)

Edit:
I figured out the answer to my problem using:

<?php echo "<a href='#' onclick='if (event.stopPropagation) {
event.stopPropagation();
}
event.cancelBubble = true;
doPay(".$row["id"].");return true;'>Pay</a> <a href='#' onclick='if (event.stopPropagation) {
event.stopPropagation();
}
event.cancelBubble = true;
doEdit(".$row["id"].");return true;'>Edit</a> <a href='#' onclick='if (event.stopPropagation) {
event.stopPropagation();
}
event.cancelBubble = true;
doDelete(".$row["id"].");return true;'>Delete</a>"; ?>