DarioS DarioS - 16 days ago 5
HTML Question

How i can hide and show column and value of row?

I've some problem with a table, about hiding and showing a specific column and value on it,that's the code:



function myFunction() {
// Declare variables
var rigaZona, colonnaZona;
colonnaZona = document.getElementById("colonnaZona");
rigaZona = document.getElementById("rigaZona");
rigaZona.style.display='blocked';
colonnaZona.style.display='blocked';
}

<select onchange="myFunction()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<table id="myTable">
<tr class="header">
<th style="display:none;">head1</th>
<th>head2</th>
<th style="width: 65%;">head3</th>
<th>head4</th>
<th>head5</th>
<th id="colonnaZona" style="display:none;">head6</th>
</tr>

<tr>

<td style="display:none">miao</td>
<td>bau</td>
<td>roar</td>
<td>cip</td>
<td>asd</td>
<td id="rigaZona" style="display:none">africa</td>
</tr>

</table>





Something appear, but not what I'm expecting, I want to set the rigaZona and colonnaZona as visible on change of the select, any solution?

Answer

If you want to integrate your select list in corresponding to showing and hiding specific columns in table. It is better to give id /classin eachthandtd` the same with value in select class. Try this one:

selecting will change table appearance:

//getting select list value
var arr = Array.from(document.querySelectorAll("#sels option"));
    arr.forEach(function(v,i){
      arr[i] = v.value;
    })

function arrShow(list, cl) {
  list.forEach(function(el) {
    var t = document.getElementsByClassName(el);    
    if (el === cl) {
      //just hard coded it since i know only two elements th and td
      t[0].style.display = 'block';
      t[1].style.display = 'block';
    } else {
      t[0].style.display = 'none';
      t[1].style.display = 'none';
    } 
  })
}

arrShow(arr, "c2");

function myFunction(s) {
  arrShow(arr,s);
}
table td {
  text-align: center;
}

table th {
  border: 1px solid green;
}
<select id="sels" onchange="myFunction(this.value)">
  <option value="c1">c1</option>
  <option value="c2" selected>c2</option>
  <option value="c6">c6</option>
</select>
<table id="myTable">
  <tr class="header">
    <th class="c1">head1</th>
    <th class="c2">head2</th>
    <th class="c3" style="width: 65%;">head3</th>
    <th class="c4">head4</th>
    <th class="c5">head5</th>
    <th class="c6">head6</th>
  </tr>

  <tr>
    <td class="c1">miao</td>
    <td class="c2">bau</td>
    <td class="c3">roar</td>
    <td class="c4">cip</td>
    <td class="c5">asd</td>
    <td class="c6">africa</td>
  </tr>

</table>