在li上单击切换特定表

Question

In my code i have 2 divs one div contains 3 table with id table1, table2 , table3. Other div has 3 li elements whose class is same as table id. first li class is table1, second li class is table2... and so on. Initially all the tables are hide. On first li click i want to toggle first table, on second toggle to second table... and so on. The HTML code is

    <div class="allTemplateName">
        <li class="table1">A</li>
        <li class="table2">B</li>
        <li class="tbale3">C</li>
    </div>

 <div class="container">
   <table id="table1">
   <tr>
     <td> Hello</td>
   </tr>
  </table>
<table id="table2">
   <tr>
   <td> Hello</td>
    </tr>
   </table>
   <table id="table3">
    <tr>
     <td> Hello</td>
   </tr>
   </table>
 </div>

I am using this j query code to get the result but it is not working.

    $(document).ready(function() {
      $(".allTemplateName li").click(function() {
       // get the target table:
       var tarTable = $("#" + $(this).html());

            // toggle:
         tarTable.toggle();

           $('.table').not(tarTable).hide();
        });
    });

Answer 1

Few changes :

• .html() gets you inner html of the element,use .attr('class') or prop('class') to get the class Name.
• $('.table') will find elements with class as tablr . - class selector. Either add class attribute as table or use $('table') element selector.
• Typo in the class attribute <li class="tbale3">C</li> - class="table3"

---

$(document).ready(function () {
    $(".allTemplateName li").click(function () {
        // get the target table:
        var tarTable = $("#" + $(this).attr('class'));

        // toggle:
        tarTable.toggle();    
        //if you need to keep the element visible use tarTable.show()

        $('.container table:visible').not(tarTable).hide();
    });
});

Fiddle

Answer 2

You're close, but you don't want the HTML of the li , you want its class (and I suggest changing that, below).

$(function() {
    $(".allTemplateName li").click(function() {
        var tableSelect = "#" + $(this).attr("class");
        var tables = $(".container table");
        tables.filter(tableSelect).toggle();
        tables.not(tableSelect).hide();
    });
});

The reason I wouldn't use class is that you may well want to add other classes to those li elements, which would break it. Instead, I'd use a data-* attribute:

<div class="allTemplateName">
    <li data-table="#table1">A</li>
    <li data-table="#table2">B</li>
    <li data-table="#table3">C</li>
</div>

Then:

$(function() {
    $(".allTemplateName li").click(function() {
        var tableSelect = $(this).attr("data-table");
        var tables = $(".container table");
        tables.filter(tableSelect).toggle();
        tables.not(tableSelect).hide();
    });
});

Live Example:

 $(".container table").hide(); $(function() { $(".allTemplateName li").click(function() { var tableSelect = $(this).attr("data-table"); var tables = $(".container table"); tables.filter(tableSelect).toggle(); tables.not(tableSelect).hide(); }); }); 

 <div class="allTemplateName"> <li data-table="#table1">A</li> <li data-table="#table2">B</li> <li data-table="#table3">C</li> </div> <div class="container"> <table id="table1"> <tr> <td>Table 1</td> </tr> </table> <table id="table2"> <tr> <td>Table 2</td> </tr> </table> <table id="table3"> <tr> <td>Table 3</td> </tr> </table> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

Answer 3

Please make the structure like below code...

<div class="allTemplateName">
   <li data-id="table1" class="template-name">A</li>
   <li data-id="table2" class="template-name">B</li>
   <li data-id="table3" class="template-name">C</li>
</div>

<div class="container">
  <table id="table1" class="table-select">
   <tr>
    <td> Hello</td>
   </tr>
  </table>
  <table id="table2" class="table-select">
   <tr>
    <td> Hello</td>
   </tr>
  </table>
  <table id="table3" class="table-select">
   <tr>
    <td> Hello</td>
   </tr>
  </table>
</div>

Then use the jquery like this:

$("body").on("click", ".template-name", function (e) {
   var tableId = $(this).attr("data-id");
$(".table-select").hide(); // this would be hide all table initially 
$("#"+tableId).show();// this will be show selected table contains unique id 
 });

Answer 4

you can use .index(); without need to Classes or Ids .. simply if you click on 1st li show 1st table .. and if click 2nd li show 2nd table .. so on...

 $(document).ready(function() {
      $(".allTemplateName li").on('click',function() {
       // get the target table:
       $('.container table').hide();
       $('.container table').eq($(this).index()).slideDown();
    });
});

JSFIDDLE

Answer 5

Try this : I've also added some CSS to it.

Here is the working fiddle : http://jsfiddle.net/dLz9cweh/

HTML :

<div class="allTemplateName">
    <li class="table1">A</li>
    <li class="table2">B</li>
    <li class="table3">C</li>
</div>
<div class="container">
    <table id="table1" class="hide">
        <tr>
            <td>Hello A</td>
        </tr>
    </table>
    <table id="table2" class="hide">
        <tr>
            <td>Hello B</td>
        </tr>
    </table>
    <table id="table3" class="hide">
        <tr>
            <td>Hello C</td>
        </tr>
    </table>
</div>

CSS :

table {
    border:1px solid black;
    margin:10px;
}
li {
    cursor:pointer;
}
.hide {
    display : none;
}
.active {
    display:block
}

JS

$(document).ready(function () {
     $(".allTemplateName li").click(function () {
         var id = $(this).attr('class');
         $("#" + id).addClass('active').siblings().removeClass('active');

     });
 });

Answer 6

html:

<div class="allTemplateName">
<li class="table1">A</li>
<li class="table2">B</li>
<li class="table3">C</li>
</div>
<div class="container">
<table id="table1">
    <tr>
        <td> Hello 1</td>
    </tr>
</table>
<table id="table2">
    <tr>
        <td> Hello 2</td>
    </tr>
</table>
<table id="table3">
    <tr>
        <td> Hello 3</td>
    </tr>
</table>

js:

$(document).ready(function () {
    $(".allTemplateName li").click(function () {
        // get the target table:
        var tarTable = $("#" + $(this).attr('class'));
        // toggle:
        tarTable.toggle();

        $('.table').not(tarTable).hide();
    });
});