下面是我编写的Jquery代码，用于显示相应按钮上的相应表行并单击并隐藏其他行
就目前而言，我无法使用此代码显示行，我希望您对我做错的指导。谢谢
我为这个冗长而详细的问题道歉。
$(document).ready(function(){
$("#Item_1,#Item_2,#Item_3,#Item_4,#Item_5,#Item_6,#Item_7,#Item_8,#Item_9,#Item_10,#Item_11,#Item_12").click(function(event){
alert("enter on click event");
event.preventDefault();
var id = $(this).attr('id');
var fil = new Array();
var rows = $("table.increaseItem tr");
rows.each(function(i){
fil[i] = $(this).attr('class');
});
var len = fil.length();
alert("the id of the button is"+ id);
alert("the class of the row is"+fil);
alert("the length of fil is"+ len);
for (var j=0; j<= len; j++){
if (id==fil[j]) {
rows.filter('.'+fil[j]).show();
}
else {
rows.not('.'+fil[j]).hide();
}
}
});
});
下面是按钮表的HTML和我要在按钮上显示的行
<table id="Buttons">
<tr>
<td class="Item_options"><button id="Item_1" class="Item_Selection">Item 1</button></td>
<td class="Item_options"><button id="Item_2" class="Item_Selection">Item 2</button></td>
<td class="Item_options"><button id="Item_3" class="Item_Selection">Item 3</button></td>
<td class="Item_options"><button id="Item_4" class="Item_Selection">Item 4</button></td>
<td class="Item_options"><button id="Item_5" class="Item_Selection">Item 5</button></td>
<td class="Item_options"><button id="Item_6" class="Item_Selection">Item 6</button></td>
</tr>
<tr>
<td class="Item_options"><button id="Item_7" class="Item_Selection">Item 7</button></td>
<td class="Item_options"><button id="Item_8" class="Item_Selection">Item 8</button></td>
<td class="Item_options"><button id="Item_9" class="Item_Selection">Item 9</button></td>
<td class="Item_options"><button id="Item_10" class="Item_Selection">Item 10</button></td>
<td class="Item_options"><button id="Item_11" class="Item_Selection">Item 11</button></td>
<td class="Item_options"><button id="Item_12" class="Item_Selection">Item 12</button></td>
</tr>
</table>
<div id="IncreaseDecreaseTable">
<table id="DisplayRowsbyButton" class="increaseItem">
<tr class="Item_1">
<td><input type="text" id="CountIncrease" class="IncreaseCount"></input> </td>
<td><button id="Increase">+</button></td>
<td><button id="Decrease">-</button></td>
<td><input id="Total"></input></td>
<td><button id="AddButton">Add to Cart</button></td>
<td><button id="RemoveButton">Delete from Cart</button></td>
</tr>
<tr class="Item_2">
<td><input type="text" id="CountIncrease" class="IncreaseCount"></input> </td>
<td><button id="Increase">+</button></td>
<td><button id="Decrease">-</button></td>
<td><input id="Total"></input></td>
<td><button id="AddButton">Add to Cart</button></td>
<td><button id="RemoveButton">Delete from Cart</button></td>
</tr>
<tr class="Item_3">
<td><input type="text" id="CountIncrease" class="IncreaseCount"></input> </td>
<td><button id="Increase">+</button></td>
<td><button id="Decrease">-</button></td>
<td><input id="Total"></input></td>
<td><button id="AddButton">Add to Cart</button></td>
<td><button id="RemoveButton">Delete from Cart</button></td>
</tr>
<tr class="Item_4">
<td><input type="text" id="CountIncrease" class="IncreaseCount"></input> </td>
<td><button id="Increase">+</button></td>
<td><button id="Decrease">-</button></td>
<td><input id="Total"></input></td>
<td><button id="AddButton">Add to Cart</button></td>
<td><button id="RemoveButton">Delete from Cart</button></td>
</tr>
<tr class="Item_5">
<td><input type="text" id="CountIncrease" class="IncreaseCount"></input> </td>
<td><button id="Increase">+</button></td>
<td><button id="Decrease">-</button></td>
<td><input id="Total"></input></td>
<td><button id="AddButton">Add to Cart</button></td>
<td><button id="RemoveButton">Delete from Cart</button></td>
</tr>
<tr class="Item_6">
<td><input type="text" id="CountIncrease" class="IncreaseCount"></input> </td>
<td><button id="Increase">+</button></td>
<td><button id="Decrease">-</button></td>
<td><input id="Total"></input></td>
<td><button id="AddButton">Add to Cart</button></td>
<td><button id="RemoveButton">Delete from Cart</button></td>
</tr>
<tr class="Item_7">
<td><input type="text" id="CountIncrease" class="IncreaseCount"></input> </td>
<td><button id="Increase">+</button></td>
<td><button id="Decrease">-</button></td>
<td><input id="Total"></input></td>
<td><button id="AddButton">Add to Cart</button></td>
<td><button id="RemoveButton">Delete from Cart</button></td>
</tr>
<tr class="Item_8">
<td><input type="text" id="CountIncrease" class="IncreaseCount"></input> </td>
<td><button id="Increase">+</button></td>
<td><button id="Decrease">-</button></td>
<td><input id="Total"></input></td>
<td><button id="AddButton">Add to Cart</button></td>
<td><button id="RemoveButton">Delete from Cart</button></td>
</tr>
<tr class="Item_9">
<td><input type="text" id="CountIncrease" class="IncreaseCount"></input> </td>
<td><button id="Increase">+</button></td>
<td><button id="Decrease">-</button></td>
<td><input id="Total"></input></td>
<td><button id="AddButton">Add to Cart</button></td>
<td><button id="RemoveButton">Delete from Cart</button></td>
</tr>
<tr class="Item_10">
<td><input type="text" id="CountIncrease" class="IncreaseCount"></input> </td>
<td><button id="Increase">+</button></td>
<td><button id="Decrease">-</button></td>
<td><input id="Total"></input></td>
<td><button id="AddButton">Add to Cart</button></td>
<td><button id="RemoveButton">Delete from Cart</button></td>
</tr>
<tr class="Item_11">
<td ><input type="text" id="CountIncrease" class="IncreaseCount"></input> </td>
<td><button id="Increase">+</button></td>
<td><button id="Decrease">-</button></td>
<td><input id="Total"></input></td>
<td><button id="AddButton">Add to Cart</button></td>
<td><button id="RemoveButton">Delete from Cart</button></td>
</tr>
<tr class="Item_12">
<td ><input type="text" id="CountIncrease" class="IncreaseCount"></input> </td>
<td ><button id="Increase">+</button></td>
<td ><button id="Decrease">-</button></td>
<td><input id="Total"></input></td>
<td><button id="AddButton">Add to Cart</button></td>
<td><button id="RemoveButton">Delete from Cart</button></td>
</t>
</table>
</div>
答案 0 :(得分：0)
$(document).ready(function () {
$("#Item_1,#Item_2,#Item_3,#Item_4,#Item_5,#Item_6,#Item_7,#Item_8,#Item_9,#Item_10,#Item_11,#Item_12").click(function (event) {
var id = $(this).attr('id');
$('#DisplayRowsbyButton .' + id).show();
});
});
将整个js部分更改为此
还添加style =“display：none;”与所有第二个表tr
如果你想要隐藏所有其他tr，只显示对应于点击的按钮，请使用此
$(document).ready(function () {
$("#Item_1,#Item_2,#Item_3,#Item_4,#Item_5,#Item_6,#Item_7,#Item_8,#Item_9,#Item_10,#Item_11,#Item_12").click(function (event) {
var id = $(this).attr('id');
$('#DisplayRowsbyButton tr').hide();
$('#DisplayRowsbyButton .' + id).show();
});
});