How to hide table column with javascript? [duplicate]

Question

I need some help. Code below doesn't work just like i needed.

What I want here: With the help of JavaScript I want to hide or make a table column invisible which has id myid.

$(document).ready(function(){	
  document.getElementById( 'myid' ).style.display = 'none';
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="200" border="1">
  <tr>
    <td id="myid">x</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

thanks in advance!

Your code seems to be working just fine? jsfiddle.net/Bjolja/kftfgpke darn... too slow — Pochen
– Pochen, Commented Feb 15, 2016 at 11:53
you should try to get away from using width, border, etc.. on tables. Try to solve this using CSS — Jeff
– Jeff, Commented Feb 15, 2016 at 15:53

Jivings · Accepted Answer · 2016-02-15 11:53:28Z

2

Use jquery like this :

$(document).ready(function(){   
  $("#myid").hide(); 
});

Hope this helps :)

edited Feb 15, 2016 at 11:53

Jivings

23.3k7 gold badges63 silver badges102 bronze badges

answered Feb 15, 2016 at 11:53

Vivek Solanki

4621 gold badge7 silver badges10 bronze badges

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

Comments

Simone Sanfratello · Accepted Answer · 2016-02-15 12:00:42Z

2

maybe you want to hide entire column by the id of a table cell

something like this

<body>
<table width="200" border="1">
  <tr>
    <td id="myid" class="col0">x</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
 </tr>
  <tr>
    <td class="col0">x</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
 </tr>
</table>
</body>



$(document).ready(function(){   
    var className = $('#myid').attr('class')
  console.log(className)
  $('.'+className).hide()
});

answered Feb 15, 2016 at 12:00

Simone Sanfratello

1,6301 gold badge12 silver badges22 bronze badges

Comments

IsraGab · Accepted Answer · 2016-02-15 12:04:55Z

2

I don't think you added the jquery in your code. Your code is working. Check this FIDDLE

Add this line in your html:

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

edited Feb 15, 2016 at 12:04

answered Feb 15, 2016 at 11:58

IsraGab

5,1853 gold badges30 silver badges50 bronze badges

3 Comments

Devisy Over a year ago

i will try and report it to you

Devisy Over a year ago

Yes isragrab it works manythanks

IsraGab Over a year ago

You're welcome @Devisy. Since you're new here, please don't forget to mark the answer accepted which helped most in solving the problem. See also How does accepting an answer work (meta.stackexchange.com/questions/5234/…)?

Marcos Pérez Gude · Accepted Answer · 2016-02-15 11:54:50Z

1

Change the ids with a classname that repeats in all column. The reason is that ids are unique and you must not duplicate them.

$(document).ready(function(){   
  $('.myid').hide()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table width="200" border="1">
  <tr>
    <td class="myid">x</td>
    <td>&nbsp;</td>
    <td>x</td>
  </tr>
  <tr>
    <td class="myid">y</td>
    <td>&nbsp;</td>
    <td>y</td>
  </tr>
</table>

answered Feb 15, 2016 at 11:54

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

Collectives™ on Stack Overflow

How to hide table column with javascript? [duplicate]

4 Answers 4

Comments

Comments

3 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

Comments

Linked

Related