Response title
This is preview!
Showing/hiding table rows based on groupnames stored in contained images
in Using jQuery
•
10 years ago
Hi all,
Now I have a dropdownlist on the page where the user selects the groupname from
i.e. "11to20". I would like to be able to hide the rows not having the selected groupname
and show the rows that do.
$(obj).attr('name', obj.options[obj.selectedIndex].value).parents('tr').siblings().fadeOut('fast');
I'm struggling with the following:
Say, for example, i have a table with an undefined number of rows.
Row 1 contains number 1 to 10, row 2 contains 11 to 20... you get the picture.
The table is autogenerated and id's are made unique by the system (GUID's plus id).
I am able to add a 'name' attribute to 'img''s that are in the td's and add a groupname
i.e. '11to20'. Using this i want to test showing/hiding group rows.
Row 1 contains number 1 to 10, row 2 contains 11 to 20... you get the picture.
The table is autogenerated and id's are made unique by the system (GUID's plus id).
I am able to add a 'name' attribute to 'img''s that are in the td's and add a groupname
i.e. '11to20'. Using this i want to test showing/hiding group rows.
Now I have a dropdownlist on the page where the user selects the groupname from
i.e. "11to20". I would like to be able to hide the rows not having the selected groupname
and show the rows that do.
I've constructed a query that would hide the selected groupname but it hides all tr's.
$(obj).attr('name', obj.options[obj.selectedIndex].value).parents('tr').siblings().fadeOut('fast');
here's the (simplified) sample html i constructed by hand for this message:
<fieldset class="my-form">
<div>
<div class="NumberSelector"">
<label for="ChooseNumber">Choose a number</label>
<table id="ChooseNumber" cellspacing="10" border="0" style="width:542px;">
<tr>
<td>
<label for="ChooseNumber_1">
<img name="1To10" src="/images/number1.jpg" alt="number1" onclick="ImagePopup(this);"/>
</label>
<input id="ChooseNumber_1" type="radio" name="ChooseNumber" value="http://somesite/images/number1.JPG" />
</td>
<td>
<label for="ChooseNumber_2">
<img name="1To10" src="/images/number2.jpg" alt="number2" onclick="ImagePopup(this);"/>
</label>
<input id="ChooseNumber_2" type="radio" name="ChooseNumber" value="http://somesite/images/number2.JPG" />
</td>
... etc up to number 10
</tr>
<tr>
<td>
<label for="ChooseNumber_1">
<img name="11To20" src="/images/number11.jpg" alt="number11" onclick="ImagePopup(this);"/>
</label>
<input id="ChooseNumber_11" type="radio" name="ChooseNumber" value="http://somesite/images/number11.JPG" />
</td>
<td>
<label for="ChooseNumber_12">
<img name="11To20" src="/images/number12.jpg" alt="number12" onclick="ImagePopup(this);"/>
</label>
<input id="ChooseNumber_12" type="radio" name="ChooseNumber" value="http://somesite/images/number12.JPG" />
</td>
... etc up to number 10
</tr>
... etc nth number of rows
</div>
</div>
</fieldset>
I hope someone has a solution because whatever I try, it's not giving me the desired results.
1
