How to hide a group of td elements?

Question

I am making a dynamic form using table. My table was like below.

<table border="1">
    <tr>
        <td>A Label Name</td>
        <td>:</td>
        <td colspan="4"><!-- Input text --></td>
    </tr>
    <tr>
        <td>Category</td>
        <td>:</td>
        <td colspan="4"><!-- Select Option value: { both, group 1, group 2 } --></td>
    </tr>
<tr>
    <!-- Group 1 -->
        <td>Group 1</td>
        <td>:</td>
        <td>- Group 1 Name -</td>
    <!-- End of Group 1 -->

    <!-- Group 2 -->
        <td>Group 2</td>
        <td>:</td>
        <td>- Group 2 Name -</td>
    <!-- End of Group 2 -->
</tr>

How to hide group 1 td element, so that the table will only display the td of group 2, without having to delete or clear that td elements by using javascript?

I have tried to add span tag to group them and then styling to display to become none.

<span style="display:none">
<!-- Group 1 -->
<td>Group 1</td>
<td>:</td>
<td>- Group 1 Name -</td>
<!-- End of Group 1 -->
</span>

But nothing happened. Any idea?

Answer 1

If you're using jQuery you can set a common class on the tag (eg class="className") and use

$('.className').hide();

To initialise this you could try addind the style inline to the tag itself?

and use

$('.className').show();

to show the cells when you need them

Answer 2

You should make each group in it's own <tr>, then you can hide one of the rows and not the other. I think you will get unexpected or undesired effects having 6 columns in a table with only three of them visible.

<table border="1">
  <tr class="group1" style="display:none">
    <!-- Group 1 -->
    <td>Group 1</td>
    <td>:</td>
    <td>- Group 1 Name -</td>
    <!-- End of Group 1 -->
  </tr>
  <tr class="group2">
    <!-- Group 2 -->
    <td>Group 2</td>
    <td>:</td>
    <td>- Group 2 Name -</td>
    <!-- End of Group 2 -->
  </tr>
  ...

And use javascript to set .group1 to display:block and .group2 to display:none.

Answer 3

With Jquery, it would be something like this:

NEW VERSION

http://jsfiddle.net/dactivo/VPe2U/

The most sofisticated way would be like this,slice gives you the chance to choose between first and second value (it's 0-based index).

$("#test tr:eq(0) td").slice(0,3).hide();

or in case you don't want to define the start point (as @Felix Kling comments):

$("#test tr:eq(0) td:lt(4)").hide()

OLD VERSION

http://jsfiddle.net/dactivo/SLzNT/

$("#test tr:eq(0) td:eq(0),#test tr:eq(0) td:eq(1),#test tr:eq(0) td:eq(2)").hide();

Which means hide the first/2nd/3rd cell in the first row

Answer 4

I'm always wondering why people give jQuery solutions for simple problems.

I'm assuming here that you have a fixed format of your table, but you can easily adapt it if you need to hide more continuos cells:

Give your table an ID.

var table = document.getElementById('table-id');
var firstRow = table.rows[0];
var cells = firstRow.cells;
for(var i = 0, l = cells.length; i < 2 && i < l; i++) {
     cells[i].style.display = 'none';
}

If you need to do this for every row, you can just loop over table.rows.

Answer 5

[Working demo]

function hideCells(root, from, to) {
  root = document.getElementById(root);
  var all  = root.getElementsByTagName("td");

  if (to > all.length)
    to = all.length;

  for ( var i = from-1; i < to; i++ ) {
      all[i].style.display = "none";    
  }
}

// USAGE
hideCells("table_id", 1, 3); // hides: 1, 2, 3 <td>  ​