Bharath Bharath - 5 months ago 16
jQuery Question

Display corresponding table row on button click in another table in JQuery

Below is the Jquery code I have written to show the corresponding table row on the corresponding button click and hide the other rows

As it stands , I am not able to display the row with this code , I would like your guidance on what I am doing wrong. Thank you

I apologize for the long and detailed question.

$(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();
}



}

});

});


Below is the HTML for the table of buttons and the rows I want to display on the button click

<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><button id="Increase">+</button></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><button id="Decrease">-</button></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><input id="Total"></input></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><button id="Increase">+</button></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><button id="Decrease">-</button></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><input id="Total"></input></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><button id="Increase">+</button></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><button id="Decrease">-</button></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><input id="Total"></input></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><button id="Increase">+</button></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><button id="Decrease">-</button></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><input id="Total"></input></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><button id="Increase">+</button></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><button id="Decrease">-</button></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><input id="Total"></input></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><button id="Increase">+</button></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><button id="Decrease">-</button></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><input id="Total"></input></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><button id="Increase">+</button></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><button id="Decrease">-</button></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><input id="Total"></input></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><button id="Increase">+</button></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><button id="Decrease">-</button></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><input id="Total"></input></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><button id="Increase">+</button></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><button id="Decrease">-</button></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><input id="Total"></input></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><button id="Increase">+</button></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><button id="Decrease">-</button></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><input id="Total"></input></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><button id="Increase">+</button></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><button id="Decrease">-</button></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><input id="Total"></input></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td ><button id="Increase">+</button></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td ><button id="Decrease">-</button></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><input id="Total"></input></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><button id="AddButton">Add to Cart</button></td>
<td><button id="RemoveButton">Delete from Cart</button></td>
</t>
</table>
</div>

Answer
        $(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();
    });
});

Change your whole js section to this

also add style="display:none;" with all second table tr

If you want hide all other tr on second , show only coresponding to clicked button, use this

$(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();
    });
});