Change the content of container with particular table with different button clicks

Question

I am trying to change the tables or a div nested inside a jumbotron,whenever i click on a specific button it should replace the current table and again clicking on it should display the table the button associated.Tried many different examples,but none seem to work. Sorry if posted some things in a wrong way. What i saw(only some of them listed here): http://jsfiddle.net/sU9Pf/ Replace Div Content onclick JS Code:

$(window).load(function() {
$("#table_mb tr").click(function() $(this).addClass('selected').siblings().removeClass('selected');
var value = $(this).find('td:first').html();
 //alert(value);
});
$('.ok').on('click', function(e) {
alert($("#table_mb tr.selected td:first").html());
});
});
$('#mb').on('click', function() {
if ($('#table_mb').css('display') != 'none') {      $('#table_pr').html($('#static').html()).show().siblings('table_responsive').hide();
}else if ($('#table_pr').css('display') != 'none') {
 $('#table_mb').show().siblings('table_responsive').hide();
}
});

***CSS Code***

body
{
    font-family: 'Play', sans-serif;
    background-image: url(/images/default.jpg);
    background-position: right;
    /*background: #1976D2;*/
}
.header
{
    font-family: 'Play', sans-serif;
    color: whitesmoke;
}
td
{
    border: 1px #DDD solid;
    padding: 5px;
    cursor: pointer;
}
.selected {
    background-color: #2196F3;
    color: #FFF;
}
.a1
{
    position: relative;
    bottom: 48px;
}
.a2
{
    position: relative;
    bottom: 48px;
}
.a3
{
    position: relative;
    bottom: 48px;
}
.a4
{
    position: relative;
    bottom: 48px;
}
.a5
{
    position: relative;
    bottom: 48px;
}
.a6
{
    position: relative;
    bottom: 48px;
}
.demo
{
    display: none;
}
.table_mb
{
    display: inline-block;
}

HTML Code:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-2"></div>
        <div class="col-md-8">
            <div class="jumbotron">
                <div class="btn-group" role="group">
                    <div class="btn-group btn-group-lg" role="group">
                        <button type="button" class="btn btn-primary a1" id="mb">Motherboards</button>
                        <button type="button" class="btn btn-primary a2" id="pr">Processors</button>
                        <button type="button" class="btn btn-primary a3" id="rm">Ram</button>
                        <button type="button" class="btn btn-primary a4" id="cb">Cabinet</button>
                        <button type="button" class="btn btn-primary a5" id="hd">Hard Drives</button><button type="button" class="btn btn-primary a6" id="ps">Power Supplies</button>
                    </div>
                </div>
                <table class="table" id="table_mb">
                    <thead>
                        <tr>
                            <th>Serial NO</th>
                            <th>Model NO</th>
                            <th>Price</th>
                        </tr>
                    </thead>
                    <tr>
                        <td>1</td>
                        <td>Asus Rampage</td>
                        <td>5000</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>Asus Rampage VII</td>
                        <td>7000</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>Asus Rampage</td>
                        <td>9000</td>
                    </tr>
                </table>
                <div class="demo" id="table_pr">
                    This works</div>
            </div>
        </div>
        <div class="col-md-4"></div>
    </div>
</div>
</div>

You have syntax error in your code you forget opening brace in `$("#table_mb tr").click` and your `$('#mb').on('click'` is outside of load event. — jcubic, Mar 03 '16 at 17:12
ok.but that is for only selectable rows,i didnt get any error though,the code for selecting the rows works fine. — Azhar Kanorwala, Mar 03 '16 at 17:22

score 0 · Accepted Answer · answered Mar 06 '16 at 17:28

Done using the Navs class from the bootstrap framework. http://jsfiddle.net/Azhar786/d1k411pz/

 <ul class="nav nav-pills nav-justified" role="tablist" id="tabs">
    <li role="presentation" class="active" id="mb"><a href="#table_mb" data-toggle="tab" aria-controls="table_mb" role="tab">Motherboards</a></li>
    <li role="presentation" id="pr"><a href="#table_pr" data-toggle="tab" aria-controls="table_pr" role="tab">Processors</a></li>
    <li role="presentation" id="rm"><a href="#table_rm" data-toggle="tab" aria-controls="table_rm" role="tab">Ram</a></li>
    <li role="presentation" id="mr"><a href="#table_mr" data-toggle="tab" aria-controls="table_mr" role="tab">Monitor</a></li>
    <li role="presentation" id="hd"><a href="#table_hd" data-toggle="tab" aria-controls="table_hd" role="tab">Hard Disk</a></li>
  </ul>

Change the content of container with particular table with different button clicks

1 Answers1