How to show/hide a td tag after hiding it

Question

I hide a td tag but I cant show it afterwards so I wonder what is that problem.

I draw the td tag by using javascript and when the user select option in the dropdown list which class is selected_option will decide the visibility of it.

The problem is the td cant be hide or shown even though I changed the selected option.

tempHtml += '<td id="lang-capvariable"><input type="text" class="w3-input"></td>';

$('.selected_option').change(function(){
     let option = $(this).val()
     let showvariable=false;

     switch(option){
          case(show):
              showvariable=true;
              break;
          case(hide):
              showvariable=false;
              break;
          default:
              showvariable=false;
              break;
     }

     if(showvariable==true){
          $('#lang-capvariable').show()
     }else{
          $('#lang-capvariable').hide()
     }
}

Answer 1

Try to show all table

<table>
<tr><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td></tr>
<tr><td>1</td><td id=ChangeMe>0</td><td>1</td></tr>
<tr><td>1</td><td>1</td><td>1</td></tr>
</table>
<button id=ShowHide>Show / Hide</button>
<script src=Code.js></script>

Code.js

 function ChangeVisibility()
    {
        if(document.getElementById("ChangeMe").style.display=='none')
        {
            document.getElementById("ChangeMe").style.display='block';
        }
        else
        {
            document.getElementById("ChangeMe").style.display='none';
        }
    }
    document.getElementById("ShowHide").addEventListener("click",ChangeVisibility);

ChangeVisibility();

Load javascript and hide td element in the end of javascript if you need to start width hidden td.

Answer 2

its always hidden because you added the hidden attribute to it. You need to remove it.