Mouseover and Click - Selecting cells from tables - JavaScript and AJAX forum at WebmasterWorld

Hi,

I show table 1 (impTbl) to enable click on four choices. I will illustrate my problem while clicking on the Invoices cell. This works properly and does call showInvoices() which shows table 2 (invTbl), a list of invoices showing invoice id, vendor, and date. Now I want to duplicate that behavior and click on an invoice id cell in table 2 (invTbl) and have another table, table 3 (detTbl), to be created yet, which will show all the details of that invoice.

PROBLEM: I have tried to duplicate the mouseover and click codes, with appropriate changes in the selectors, to make this action happen in table 2 (invTbl). I can't get it to work.

I would appreciate any help in solving this.

Thanks, RP

Here is my code:

<!DOCTYPE HTML PUBLIC
  "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html401/loose.dtd">
  
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript" src="../jquery/jquery-1.7.js"></script>


<!-- ========== mouseover and click for #impTbl WORKS FINE ======== -->

<script type="text/javascript" >

$(function() {   
$('.id').click(function() {
var choice=$.trim($(this).text());
if(choice=='Invoices') {
showInvoices();
}
});

 $('#impTbl th').mouseover(function() {
 $(this).addClass('selectedRow');
 }).mouseout(function() {
 $(this).removeClass('selectedRow');
 }).click(function() {
 });
 });

</script>

<!-- ========== mouseover and click for #invTbl DOES NOT WORK ===== -->

<script type="text/javascript" >

$(function() {   
$('#ino').click(function() {
var choice2=$.trim($(this).text());
alert("choice is "+choice2);
//if(choice=='Invoices') {
//showInvoices(choice);
});

//});

 $('#invTbl #ino').mouseover(function() {
 $(this).addClass('selectedRow');
 }).mouseout(function() {
 $(this).removeClass('selectedRow');
 }).click(function() {
 });
 });

</script>

<!-- ============= showInvoices() ============== -->

<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>Invoice No.</th> <th>Vendor</th> <th>Date</th></tr> \n"

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

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

});// getJSON 
} // showInvoices

</script>


<style type="text/css">
 
 .selectedRow {
 background-color: lightblue;
 cursor: pointer;
 }
 
</style>

</head>
 
<body>

<div id="main">

<table id='impTbl' border="3" cellpadding="5" bgcolor="#fedde3">
<caption><big><b>This is "impTbl"- click Invoices </b></big></caption> <!-- see click function for impTbl line 16 -->
<tr> <th class='id'> Invoices </th> <th class='id'> Work Codes </th> <th class='id'> Projects </th> <th class="id"> Vendors </th> </tr>
<tr></tr>
</table>
</div>

<div id="rbox">

</div>

</body>
</html>

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>

Mouseover and Click - Selecting cells from tables

Click on table cell - results in function call

pizzipie

daveVk

pizzipie

Fotiman

pizzipie

Fotiman

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week