0
我想改變表或一個div嵌套在一個jumbotron內，每當我點擊一個特定的按鈕，它應該替換當前的表，並再次點擊它應該顯示該表的按鈕associated.Tried許多不同的例子，但似乎沒有工作。 對不起，如果發佈一些錯誤的東西。 我看到了（只有一些這裏列出）： http://jsfiddle.net/sU9Pf/ Replace Div Content onclick JS代碼： 用不同的按鈕點擊改變容器的內容與特定的表
$(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>
你在你的代碼的語法錯誤，你忘了'$左括號（ 「＃table_mb TR」）。click'和你的'$（ '＃MB'）。在（'click''是在負載事件之外 – jcubic
ok.but這是僅用於可選行，我沒有得到任何錯誤，但選擇行的代碼工作正常。 –