使用JavaScript在表中显示CSS显示属性问题

Question

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

When I am applying Display:none property through JavaScript on table row ie . it works perfect.

but now I want to return again on click. but it's not Displaying on it's accurate position.

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

Answer 1

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

Read more about Display options from here

Answer 2

Use table-row instead of inline:

<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';" />

your updated jsfiddle

Answer 3

By default <tr> elements are display: table-row , not display: inline .

It is displaying incorrectly because you are giving it the wrong display model.

Answer 4

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

<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='';" />