Hide table row with java script

Question

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

I guess you mean ROW instead of RAW?

Mr. Alien
– Mr. Alien

2013-03-21 15:36:15 +00:00
Commented Mar 21, 2013 at 15:36 — Mr. Alien
– Mr. Alien, Commented Mar 21, 2013 at 15:36
Can you include the html of the table please?

romainberger
– romainberger

2013-03-21 15:39:37 +00:00
Commented Mar 21, 2013 at 15:39 — romainberger
– romainberger, Commented Mar 21, 2013 at 15:39
Yes sorry for bad English

Yohan Aluthwala
– Yohan Aluthwala

2013-03-21 16:04:21 +00:00
Commented Mar 21, 2013 at 16:04 — Yohan Aluthwala
– Yohan Aluthwala, Commented Mar 21, 2013 at 16:04
I add part of my table. only one row

Yohan Aluthwala
– Yohan Aluthwala

2013-03-21 16:08:17 +00:00
Commented Mar 21, 2013 at 16:08 — Yohan Aluthwala
– Yohan Aluthwala, Commented Mar 21, 2013 at 16:08

techfoobar · Accepted Answer · 2013-03-21 15:41:27Z

1

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)

answered Mar 21, 2013 at 15:41

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

awbergs Over a year ago

If we're going for optimized lines of code, change the value of the drop down to the ID of the table.

techfoobar Over a year ago

@awbergs - Yes, keeping the value of the option to the same as the id of the row would be most appropriate. Yes.

Yohan Aluthwala Over a year ago

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.)

Rudie · Accepted Answer · 2013-03-21 15:39:41Z

0

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>.

answered Mar 21, 2013 at 15:39

Rudie

54.2k42 gold badges137 silver badges176 bronze badges

5 Comments

Yohan Aluthwala Over a year ago

so my js will be like this $('#TapeSizeHDPT').change(function () { $('#some_tbody').children().hide(); $('#' + this.value).show(); });

Rudie Over a year ago

And you should move the [id]s from the <TABLE>s to their parent <TR>s

Yohan Aluthwala Over a year ago

yes your answer is the way i need.but its not working. i just copy your table and test with above script.

Rudie Over a year ago

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 Over a year ago

Also, you should use CSS for centering and colors. Don't mess up your HTML with that stuff.

Mark Davidson · Accepted Answer · 2013-03-21 15:46:55Z

0

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

$('#TapeSizeHDPT').change(function () {
    var id = '#PT1Row' + $(this).val();
    $('#table').find(':visible').hide();     
    $(id).show();
})

edited Mar 21, 2013 at 15:46

Mark Davidson

5,4996 gold badges37 silver badges54 bronze badges

answered Mar 21, 2013 at 15:44

Damian0o

6635 silver badges15 bronze badges

1 Comment

Yohan Aluthwala Over a year ago

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.

Collectives™ on Stack Overflow

Hide table row with java script

3 Answers 3

3 Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related