Shawn Shawn - 2 months ago 6
Javascript Question

Jquery: How to recursively assign buttons on document ready?

I have multiple buttons and tables, I want to recursively assign each button id to respective table id.

For each button, the function should help me toggle their respective tables. Clicking button 1 ("#showHide01") will toggle table 1 ("#table01").



// Working function
/*
$(function() {
$("#showHide01").on("click", function() {
$("#table01 tbody").toggle();
});
});
*/

var buttonList = ["#showHide01","#showHide02a","#showHide02b","#showHide03a","#showHide03b","#showHide04"];
var tableList = ["#table01 tbody","#table02a tbody","#table02b tbody","#table03a tbody","#table03b tbody","#table04 tbody"]

$(function() {
var i = 0, len = buttonList.length;
for (i; i < len; i+=1) {
$(buttonList[i]).on("click", function() {
$(tableList[i]).toggle();
});
};
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class="btn btn-info" id="showHide01">Show/hide table</button>
<table id="table01">
<thead>
<tr>
<th>Id</th>
<th>D2</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>002</td>
</tr>
</tbody>
</table>
<button class="btn btn-info" id="showHide02a">Show/hide table</button>
<table id="table02a">
<thead>
<tr>
<th>Id</th>
<th>D2</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>002</td>
</tr>
</tbody>
</table>
<button class="btn btn-info" id="showHide02b">Show/hide table</button>
<table id="table02b">
<thead>
<tr>
<th>Id</th>
<th>D2</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>002</td>
</tr>
</tbody>
</table>
<button class="btn btn-info" id="showHide03a">Show/hide table</button>
<table id="table03a">
<thead>
<tr>
<th>Id</th>
<th>D2</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>002</td>
</tr>
</tbody>
</table>
<button class="btn btn-info" id="showHide03b">Show/hide table</button>
<table id="table03b">
<thead>
<tr>
<th>Id</th>
<th>D2</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>002</td>
</tr>
</tbody>
</table>
<button class="btn btn-info" id="showHide04">Show/hide table</button>
<table id="table04">
<thead>
<tr>
<th>Id</th>
<th>D2</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>002</td>
</tr>
</tbody>
</table>





How can I fix this? Thanks!

Answer

What you can do is assign a single class to all your <buttons> and use a data attribute to separate which button toggles which table. That way you can create a single bind to all your buttons and get the id of the table you want to toggle systematically.

Basically the html it will go:

<button class="btn btn-info js_toggle-table" data-table-id="table01">Show/hide table</button>
<table id="table01">

And the javascript/jquery will be:

$(".js_toggle-table").on("click", function(el) {
  var tableIdSelector = "#" + $(el.target).data('table-id');
  $(tableIdSelector).toggle(); 
});

Check the updated snippet:

$(".js_toggle-table").on("click", function(el) {
  var tableIdSelector = "#" + $(el.target).data('table-id');
  $(tableIdSelector).toggle(); 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button class="btn btn-info js_toggle-table" data-table-id="table01">Show/hide table 01</button>
<table id="table01">
    <thead>
        <tr>
            <th>Table 1</th>
            <th>D2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>002</td>
        </tr>
    </tbody>
</table>
<button class="btn btn-info js_toggle-table" data-table-id="table02a">Show/hide table 02a</button>
<table id="table02a">
    <thead>
        <tr>
            <th>Table 02a</th>
            <th>D2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>002</td>
        </tr>
    </tbody>
</table>
<button class="btn btn-info js_toggle-table" data-table-id="table02b">Show/hide table 02b</button>
<table id="table02b">
    <thead>
        <tr>
            <th>Table 2 b</th>
            <th>D2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>002</td>
        </tr>
    </tbody>
</table>
<button class="btn btn-info js_toggle-table" data-table-id="table03a">Show/hide table 3 a</button>
<table id="table03a">
    <thead>
        <tr>
            <th>Table 3 a</th>
            <th>D2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>002</td>
        </tr>
    </tbody>
</table>
<button class="btn btn-info js_toggle-table" data-table-id="table03b">Show/hide table 3 b</button>
<table id="table03b">
    <thead>
        <tr>
            <th>Table 3 b</th>
            <th>D2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>002</td>
        </tr>
    </tbody>
</table>
<button class="btn btn-info js_toggle-table" data-table-id="table04">Show/hide table 4</button>
<table id="table04">
    <thead>
        <tr>
            <th>Table 4</th>
            <th>D2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>002</td>
        </tr>
    </tbody>
</table>

Cheers!

EDIT: I changed the names of the buttons and table to make it clear which one was disappearing when the button was clicked.