CODEWITHSUNDEEP
javascriptjqueryhtml
Yohan Aluthwala
Yohan Aluthwala

Reputation: 35

Hide table row with java script

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

Upvotes: 0

Views: 4665

Answers (3)

Damian0o
Damian0o

Reputation: 653

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

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

Upvotes: 0

techfoobar
techfoobar

Reputation: 66663

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)

Upvotes: 1

Rudie
Rudie

Reputation: 53831

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

Upvotes: 0

Related Questions