pizzipie - 3:28 pm on May 9, 2012 (gmt 0)

Thanks Dave,


I've been playing around with this and I got the mouseover to change the background color and click to display an alert(). I placed the on() functions after #rbox was appended to. Now my question is: can the td id's be constructed like so: "...<td id='inv'>"...? THE ANSWER IS YES and it works!.

HOWEVER, I'm confused here as I expected trouble because you pointed out that the td's should not have the same id:



Code that works: Please comment, critique !


<script type="text/javascript" >


function showInvoices() {

var table='invoice';

$.getJSON('sagleTableData.php?tbl='+table, function(invData) {

var content="";

content="<table id='invTbl' border='3' cellpadding='5' bgcolor='#fedde3'> \n"
+"<caption><big><b>Table \"invTbl\" after clicking Invoices</b></big></caption>"
+"<tbody><tr> <th class='headId' >Invoice No.</th> <th class='headId' >Vendor</th> <th>Date</th></tr> \n"

$.each(invData, function(key, val) {
content+="<tr><td id='inv'>"+val.invno+"</td><td>"+val.vendor+"</td><td>"+val.date+"</td></tr>";

});
content+="</tbody></table>";
$(content).appendTo("#rbox");

// ========== mouseover and click for #invTbl placed after appendTo #rbox ========

$('#rbox').on("click", "#invTbl td#inv", function(e) {
var choice=$.trim($(this).text());
alert("choice is "+choice);
//if(choice=='Invoices') {
// showInvoices(choice);
//});
}); //#rbox



$('#rbox').on("mouseover", "#invTbl td#inv", function(e) {
$(this).addClass('selectedRow');
});

$('#rbox').on("mouseout", "#invTbl td#inv", function(e) {
$(this).removeClass('selectedRow');
});


}); // getJSON
} // showInvoices

</script>