CODEWITHSUNDEEP
javascriptjqueryhtml
jumpman8947
jumpman8947

Reputation: 581

Javascript change table contents on click

I have a table where information changes depending on what has been clicked by the button. currently it works when i use the toggle() command but having toggle() leaves selecting multiple buttons at once which results in displaying wrong data. I have tried .show() method and it does not work. Is there a way that i can enforce only one button to be toggled at once, or remove the toggle and just have one button be shown at a time.

<button type="button" class="btn btn-primary" id="one" value="Toggle table">Example 1</button>
<button type="button" class="btn btn-primary" id="two">Example 2</button>
<button type="button" class="btn btn-primary" id="three">Example 3</button>
<button type="button" class="btn btn-primary" id="four">Example 4</button>
<button type="button" class="btn btn-primary" id="five">Example 5</button>
<button type="button" class="btn btn-primary" id="six">Example 6</button>
<button type="button" class="btn btn-primary" id="seven">Example 7</button>

<!--Table code -->
<div class="tab-content">
<table class="table table-condensed" id="table">
<!--Table code -->
</table>
</div>

<!-- Javascript -->
$(document).ready(function()
{
$("#one").click(function()


{
    var $day1 = $("#table tbody tr").filter(function () {
    return $.trim($(this).find("td").eq(0).text()) !== "0"
}).show();
});

 $("#two").on("click", function()
{
    var $rowsNo = $("#table tbody tr").filter(function () {
    return $.trim($(this).find("td").eq(0).text()) !== "1"
}).show();
});


$("#three").on("click", function()
{
    var $rowsNo = $("#table tbody tr").filter(function () {
    return $.trim($(this).find("td").eq(0).text()) !== "2"
}).show();
});

$("#four").on("click", function()
{
    var $rowsNo = $("#table tbody tr").filter(function () {
    return $.trim($(this).find("td").eq(0).text()) !== "3"
}).toggle();
});

$("#five").on("click", function()
{
    var $rowsNo = $("#table tbody tr").filter(function () {
    return $.trim($(this).find("td").eq(0).text()) !== "4"
}).toggle();
});

As stated above toggle works, but multiple buttons can be toggled at once resulting in bad data shown in the table. Is there a way to limit one button to be toggled? If not the show() command is not working when clicked.

Upvotes: 0

Views: 111

Answers (1)

charlietfl
charlietfl

Reputation: 171669

Add hide() before filter() so your show() only displays what is wanted

$("#one").click(function() {
   $("#table tbody tr").hide().filter(function() {
    return $.trim($(this).find("td").eq(0).text()) !== "0"
  }).show();
});

You could simplify this for all buttons also by adding a common class and a data attribute for the filter values.

<button  class="btn btn-primary filter-btn" data-filter="1">Example 2</button>

$(".filter-btn").click(function() {
   var filterVal = $(this).attr('data-filter');
   $("#table tbody tr").hide().filter(function() {
    return $.trim($(this).find("td").eq(0).text()) !== filterVal ;
  }).show();
});

Upvotes: 3

Related Questions