How to show/hide a td tag after hiding it-CodePudding

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" ></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()
            }

CodePudding user response：

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.

CodePudding user response：

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