CODEWITHSUNDEEP
javascriptjqueryhtml
user2223335
user2223335

Reputation: 209

li clicked function using jquery

I have html file in which two sections are there. Navigation and body. In Navigation section, only li elements are there. In body section, html tables are there. Once user clicks on navigation, the body section displays that information and hides everything else. 

<div id="nav">
<ul>
    <li>Summary</li>
    <li>Table1
    <ul >
        <li id="NewTable1"><a href="#NTable1">New</a></li>
        <li id="ModTable1"><a href="#MTable1">Modified</a></li>
    </ul>
    </li>
    <li>Table2
    <ul >
        <li id="NewTable2"><a href="#NTable2">New</a></li>
        <li id="ModTable2"><a href="#MTable2">Modified</a></li>
    </ul>
    </li>
        <li>Table3
    <ul >
        <li id="NewTable3"><a href="#NTable3">New</a></li>
        <li id="ModTable3"><a href="#MTable3">Modified</a></li>
    </ul>
    </li>

</ul>
</div>
<div id="detailss">
<table class ="tohide" id="NTable1" border="1" >
        <caption><b>Table1:New</b></caption>
        <tr><th>Col</th></tr>
        <tr><td>Table 1 New Value</td></tr>
</table>

<table class ="tohide" id="MTable1" border="1" >
        <caption><b>Table1:Mod</b></caption>
        <tr><th>Col</th></tr>
        <tr><td>Table 1 Mod Value</td></tr>
</table>
<table class ="tohide" id="NTable2" border="1" >
        <caption><b>Table2:New</b></caption>
        <tr><th>Col</th></tr>
        <tr><td>Table 2 New Value</td></tr>
</table>

<table class ="tohide" id="MTable2" border="1" >
        <caption><b>Table2:Mod</b></caption>
        <tr><th>Col</th></tr>
        <tr><td>Table 2 Mod Value</td></tr>
</table>
<table class ="tohide" id="NTable3" border="1" >
        <caption><b>Table3:New</b></caption>
        <tr><th>Col</th></tr>
        <tr><td>Table 3 New Value</td></tr>
</table>

<table class ="tohide" id="MTable3" border="1" >
        <caption><b>Table3:Mod</b></caption>
        <tr><th>Col</th></tr>
        <tr><td>Table 3 Mod Value</td></tr>
</table>
    <div>

Now to handle click feature, following code is written 

 $("#NewTable1").click(function(event, ui) {
 $('.tohide').hide();
  $("#NTable1").show();

 });
 $("#ModTable1").click(function(event, ui) {
 $('.tohide').hide();
  $("#MTable1").show();

 });
 $("#NewTable2").click(function(event, ui) {
 $('.tohide').hide();
  $("#NTable2").show();

 });
 $("#ModTable2").click(function(event, ui) {
 $('.tohide').hide();
  $("#MTable2").show();

 });
 $("#NewTable3").click(function(event, ui) {
 $('.tohide').hide();
  $("#NTable3").show();

 });
 $("#ModTable3").click(function(event, ui) {
 $('.tohide').hide();
  $("#MTable3").show();

 });

This is working fine but this is not good programming practice as if tables get increased, the similar function needs to be added.
My question is how to change this click function in such a way via one function only, all tables are handled.
Please suggest
Demo of working code is http://jsfiddle.net/anjsfiddle/TADJL/

Upvotes: 1

Views: 92

Answers (3)

Mritunjay
Mritunjay

Reputation: 25882

This should work for you

function showRelatedTable (link,table) {
    $(link).click(function(event, ui) {
    $('.tohide').hide();
       $(table).show(); 
    });
 }

for (var i = 1; i < 4; i++) {
    var newLinkName = "#NewTable"+i;
    var newTableName = "#NTable"+i;
    var modLinkName = "#ModTable"+i;
    var modTableName = "#MTable"+i;

    showRelatedTable(newLinkName,newTableName);
    showRelatedTable(modLinkName,modTableName);
};

Upvotes: 0

JackH
JackH

Reputation: 4735

Replace your jQuery with:

$("#nav ul li a").click(function(event, ui) {
    $('.tohide').hide();
    var visible = $(this).attr("href");
    $(visible).show();  
});

Here is the modified example: http://jsfiddle.net/TADJL/1/. What we are doing is getting the href attribute's value whenever you click the link and showing the corresponding table. This will not break no matter how many tables you add.

Upvotes: 1

Emanuele Paolini
Emanuele Paolini

Reputation: 10162

I think a good solution would be to use <a name="..."> to give a real target to the <a href="...">. So the correspondence between links and corresponding div is explicit in HTML. Then write a single javascript functions which looks for the element corresponding to the url clicked.

Upvotes: 1

Related Questions