Clever Geek Handbook

CSS Show property properties in table with JavaScript

There are two buttons in my code. one to display: none and the other to display the Element again at the same position.

When I apply the Display: none property via JavaScript in the ie table row it works fine.

but now I want to go back to click again. but it doesn't display the exact position on it.

Table

<table border="1">
<tr>          <td>name</td><td>cell</td>           </tr>
<tr id="rw">  <td>Ali</td><td>0341455454</td>      </tr>
<tr>          <td>irfan</td><td>033435783</td>     </tr>
</table>


Buttons

<input type="button" value=" click to display none " onclick="Javascript:document.getElementById('rw').style.display='none';" />
<input type="button" value=" click to display back "  onclick="Javascript:document.getElementById('rw').style.display='inline';" />

FIDDLE

+3


source to share


4 answers


display-inline is not a table element. Use 'table-row' instead of 'inline'.

<input type="button" value=" click to display back "  onclick="Javascript:document.getElementById('rw').style.display='table-row';" />


Updated FIDDLE

More about display options from here

+2


source


Use a row table instead of a string:

<input type="button" value=" click to display none " onclick="Javascript:document.getElementById('rw').style.display='none';" />
<input type="button" value=" click to display back "  onclick="Javascript:document.getElementById('rw').style.display='table-row';" />


updated jsfiddle

+1


source


Display: 'none' OR display: '' (empty) with

<input type="button" value="none" onclick="Javascript:document.getElementById('rw').style.display='none';" />
<input type="button" value="view" onclick="Javascript:document.getElementById('rw').style.display='';" />
+1


source


By default, <tr>

items display: table-row

are not display: inline

.

It does not display correctly because you are giving it the wrong display model.

0


source






More articles:


All Articles