current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I want to hide table row using javascript.

This is how I'm doing it now. But I know there is better way to do this.

I have use table for each row and each table has an id.

when select item on drop down according to selection only one row should show on table.

part of my table 

<table width="100%" border="0" cellspacing="0" id="tableOneHDPT1">
          <tr>
            <td width="9%" align="center" bgcolor="#0471B2" height="30"><strong>Width</strong></td>
            <td width="10%" align="center" bgcolor="#0471B2"><strong>Length</strong></td>
            <td width="8%" align="center" bgcolor="#0471B2"><strong>Mil.</strong></td>
            <td width="15%" align="center" bgcolor="#0471B2"><strong>Rolls Per Case</strong></td>
            <td width="9%" align="center" bgcolor="#0471B2"><strong>1 Case</strong></td>
            <td width="10%" align="center" bgcolor="#0471B2"><strong>2 Case</strong></td>
            <td width="8%" align="center" bgcolor="#0471B2"><strong>5 Cases</strong></td>
            <td width="11%" align="center" bgcolor="#0471B2"><strong>10 Cases</strong></td>
            <td width="10%" align="center" bgcolor="#0471B2"><strong>25 Cases</strong></td>
            <td width="10%" align="center" bgcolor="#0471B2"><strong>60 Cases</strong></td>
            </tr>
          <tr>
            <td colspan="10" align="center"><table width="100%" border="0" cellspacing="0" cellpadding="0" id="PT1Row1">
              <tr>
                <td width="9%" align="center">2''</td>
                <td width="10%" align="center">55 yds.</td>
                <td width="8%" align="center">2</td>
                <td width="15%" align="center">72</td>
                <td width="9%" align="center">N/A</td>
                <td width="10%" align="center">N/A</td>
                <td width="8%" align="center">$4.12</td>
                <td width="11%" align="center">$3.64</td>
                <td width="10%" align="center">$3.04</td>
                <td width="10%" align="center">$2.54</td>
                </tr>
            </table></td>
            </tr></table>

Drop down 

<select name="TapeSizeHDPT" id="TapeSizeHDPT">
    <option selected="selected" value="-1">&lt;Select&gt;</option>
    <option value="HDPT1">2"x55 yds.</option>
    <option value="HDPT2">3"x55 yds.</option>
    <option value="HDPT3">2"x 110 yds.</option>
    <option value="HDPT4">3"x 110 yds.</option>
    <option value="HDPT5">2"x 1000 yds.</option>
    <option value="HDPT6">3"x 110 yds.</option>
</select>

This is my js:

$('#TapeSizeHDPT').change(function() {
    if ($('#TapeSizeHDPT option:selected').val() == "HDPT1") {
        $('#PT1Row1').show();
        $('#PT1Row2').hide();
        $('#PT1Row3').hide();
        $('#PT1Row4').hide();
        $('#PT1Row5').hide();
        $('#PT1Row6').hide();
    }
});
share|improve this question
1  
I guess you mean ROW instead of RAW? –  Mr. Alien Mar 21 '13 at 15:36
    
I changed raw to row –  ITroubs Mar 21 '13 at 15:38
    
Can you include the html of the table please? –  romainberger Mar 21 '13 at 15:39
    
Yes sorry for bad English –  Yohan Aluthwala Mar 21 '13 at 16:04
    
I add part of my table. only one row –  Yohan Aluthwala Mar 21 '13 at 16:08
add comment

3 Answers

up vote 0 down vote accepted

You could hide all the rows in a <TBODY>:

$('#some_tbody').children().hide();

And then show the 1 <TR> you want to show:

$('#' + this.value).show(); // this.value is from the <select> onchange event

For this you'll need a <TABLE> with <THEAD> and <TBODY>:

<table>
  <thead>
    <tr>... THs here ...</tr>
  </thead>
  <tbody id="some_tbody">
    <tr id="HDPT1">...</tr>
    <tr id="HDPT2">...</tr>
    <tr id="HDPT3">...</tr>
    <tr id="HDPT4">...</tr>
  </tbody>
</table>

instead of all <TR>s directly in the <TABLE>.

share|improve this answer
    
so my js will be like this $('#TapeSizeHDPT').change(function () { $('#some_tbody').children().hide(); $('#' + this.value).show(); }); –  Yohan Aluthwala Mar 21 '13 at 16:29
    
Yup. (If I understand the problem correctly.) –  Rudie Mar 21 '13 at 16:35
    
And you should move the [id]s from the <TABLE>s to their parent <TR>s –  Rudie Mar 21 '13 at 16:37
    
yes your answer is the way i need.but its not working. i just copy your table and test with above script. –  Yohan Aluthwala Mar 21 '13 at 16:47
    
Because a fiddle is worth a thousand LOC: jsfiddle.net/rudiedirkx/TFgwk If the <OPTION> [value]s don't exactly match the <TR> [id]s, that's no problem. If there's some structure, we can fix that. (Like use only the last character or the number etc.) –  Rudie Mar 21 '13 at 17:06
show 3 more comments
up vote 1 down vote

You can generalize it and write it much shorter as in:

$('#TapeSizeHDPT').change(function () {        
   $('#PT1Row'+$(this).val().replace('HDPT')).show().siblings().hide();   
});

What we are essentially doing here is getting the number part of the option that was selected and showing the appropriate tr, while hiding all its siblings (i.e. all other trs)

share|improve this answer
    
If we're going for optimized lines of code, change the value of the drop down to the ID of the table. –  awbergs Mar 21 '13 at 15:42
    
@awbergs - Yes, keeping the value of the option to the same as the id of the row would be most appropriate. Yes. –  techfoobar Mar 21 '13 at 15:43
    
Im not sure i understand your answer. sorry about that im just beginner. I don't want to use table for each row (but that is what i have done above. I want to change it.) –  Yohan Aluthwala Mar 21 '13 at 16:12
add comment
up vote 0 down vote

Change values of dropdown to numerical 1,2... and then

$('#TapeSizeHDPT').change(function () {
    var id = '#PT1Row' + $(this).val();
    $('#table').find(':visible').hide();     
    $(id).show();
})
share|improve this answer
    
This #PT1Row is id one of my table. so i have #PT1Row, #PT2Row, #PT3Row etc.... for each row. I dont want to use table for each row. I just want to use <tr> so there will be only one main table and it will have ID. –  Yohan Aluthwala Mar 21 '13 at 16:22
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.