Question

here’s my js:

function DoNav(theUrl) {
  document.location.href = theUrl;
}

here’s my alternating color table code

while($i < $num) {
  if ($i % 2 == 0) {
    echo "<tr class='even' onclick=\"DoNav('physicianInfo.php');\">";
  }
  else {
    echo "<tr class='odd' onclick=\"DoNav('physicianInfo.php');\">";
  }
}

but I wanted to add a class="colorbox" when I click the row

class colorbox allows me to have an iframe modal: http://colorpowered.com/colorbox/

since my TR has a class for alternating colors, and I have a clickable row with javascript to open a link physicianInfo.php. How can I call colorbox (class="colorbox") inside the tr. can I have 2 class in 1?

I usually call the class via “a href”

Sample: <a class='colorbox' href="physicianInfo.php">

Answer 1

You have to initialize the plugin properly, since you are adding the html dynamically after page load.

while($i < $num) {
    if ($i % 2 == 0) {
        echo "<tr class='even tr-colorbox' \">";
    } else {
        echo "<tr class='odd tr-colorbox' \">";
    }
}

$('.tr-colorbox').colorbox({href: 'physicianInfo.php', iframe: true});

Another option

function DoNav(theUrl) {
    $.colorbox({href: theUrl, iframe: true});
}

while($i < $num) {
    if ($i % 2 == 0) {
        echo "<tr class='even' onclick=\"DoNav('physicianInfo.php');\">";
    } else {
        echo "<tr class='odd' onclick=\"DoNav('physicianInfo.php');\">";
    }
}