How to hide table column with javascript?

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? https://jsfiddle.net/Bjolja/kftfgpke/ darn... too slow — Pochen, Feb 15 '16 at 11:53
you should try to get away from using width, border, etc.. on tables. Try to solve this using CSS — Jeff, Feb 15 '16 at 15:53

score 2 · Answer 1 · edited Feb 15 '16 at 11:53

2

Use jquery like this :

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

Hope this helps :)

edited Feb 15 '16 at 11:53

Jivings

22,834
6
60
101

answered Feb 15 '16 at 11:53

Vivek Solanki

452
1
7
10

IsraGab · Answer 2 · 2016-02-15T12:04:55.060

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 '16 at 12:04

answered Feb 15 '16 at 11:58

IsraGab

4,819
3
27
46

i will try and report it to you – Devisy Feb 15 '16 at 12:22
Yes isragrab it works manythanks – Devisy Feb 19 '16 at 18:22
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 (http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work)? – IsraGab Feb 22 '16 at 20:08

score 2 · Answer 3 · answered Feb 15 '16 at 12:00

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

score 1 · Answer 4 · answered Feb 15 '16 at 11:54

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>

How to hide table column with javascript?

4 Answers4