How to hide / show tr tag in table without change the width and sort of cells

Question

Hi i would hide / show one row from table But when click to show row again the design change The columns of the hidden row shrink under one column of first row My code

 function toggle(tr_id) { var x = document.getElementById(tr_id); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }

 <div class="col-lg-6 col-lg-push-3"> <table class="table table-resposive "> <tr> <td>name</td> <td>address</td> <td>age</td> <td><a onclick="toggle('edit');" class="btn btn-sm btn-primary">edit</a></td> </tr> <tr id="edit"> <td><input type="text"></td> <td><input type="text"></td> <td><input type="text"></td> <td><a class="btn btn-sm btn-success">save</a></td> </tr> </table> </div>

Answer 1

You can use display="table-row"

function toggle(tr_id) {
  var x = document.getElementById(tr_id);
  if (x.style.display === 'none') {
    x.style.display = 'table-row';
  } else {
    x.style.display = 'none';
  }
}

Answer 2

It's because you are displaying the row as block. Try use visibility == "hidden" instead of display

EDIT : Or you can use display = "table-row" as show below. The use visibility == "hidden" will hide the row, but it will still take up the same space as before.

if (x.style.display === "none") {
    x.style.display = "table-row";
} else {
    x.style.display = "none";
}

 function toggle(tr_id) { var x = document.getElementById(tr_id); if (x.style.visibility === "hidden") { x.style.visibility = "visible"; } else { x.style.visibility = "hidden"; } }

 <div class="col-lg-6 col-lg-push-3"> <table class="table table-resposive "> <tr> <td>name</td> <td>address</td> <td>age</td> <td><a onclick="toggle('edit2');" class="btn btn-sm btn-primary">edit</a></td> </tr> <tr id="edit1"> <td><input type="text" ></td> <td><input type="text" ></td> <td><input type="text" ></td> <td><a class="btn btn-sm btn-success">save</a></td> </tr> <tr id="edit2"> <td><input type="text" ></td> <td><input type="text" ></td> <td><input type="text" ></td> <td><a class="btn btn-sm btn-success">save</a></td> </tr> <tr id="edit3"> <td><input type="text" ></td> <td><input type="text" ></td> <td><input type="text" ></td> <td><a class="btn btn-sm btn-success">save</a></td> </tr> </table>

Snippet 2 :

 function toggle(tr_id) { var x = document.getElementById(tr_id); if (x.style.display === "none") { x.style.display = "table-row"; } else { x.style.display = "none"; } }

 <div class="col-lg-6 col-lg-push-3"> <table class="table table-resposive "> <tr> <td>name</td> <td>address</td> <td>age</td> <td><a onclick="toggle('edit2');" class="btn btn-sm btn-primary">edit</a></td> </tr> <tr id="edit1"> <td><input type="text" ></td> <td><input type="text" ></td> <td><input type="text" ></td> <td><a class="btn btn-sm btn-success">save</a></td> </tr> <tr id="edit2"> <td><input type="text" ></td> <td><input type="text" ></td> <td><input type="text" ></td> <td><a class="btn btn-sm btn-success">save</a></td> </tr> <tr id="edit3"> <td><input type="text" ></td> <td><input type="text" ></td> <td><input type="text" ></td> <td><a class="btn btn-sm btn-success">save</a></td> </tr> </table>

Answer 3

set your td css with fixed width

 function toggle(tr_id) { var x = document.getElementById(tr_id); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } }

 td { width: 140px; display: inline-block; }

 <div class="col-lg-6 col-lg-push-3"> <table class="table table-resposive "> <tr> <td>name</td> <td>address</td> <td>age</td> <td><a onclick="toggle('edit');" class="btn btn-sm btn-primary">edit</a></td> </tr> <tr id="edit"> <td><input type="text"></td> <td><input type="text"></td> <td><input type="text"></td> <td><a class="btn btn-sm btn-success">save</a></td> </tr> </table> </div>

Answer 4

how to make row move to top

 function toggle(tr_id) { var x = document.getElementById(tr_id); if (x.style.visibility === "hidden") { x.style.visibility = "visible"; } else { x.style.visibility = "hidden"; } }

 <div class="col-lg-6 col-lg-push-3"> <table class="table table-resposive "> <tr> <td>name</td> <td>address</td> <td>age</td> <td><a onclick="toggle('edit');" class="btn btn-sm btn-primary">edit</a></td> </tr> <tr id="edit"> <td><input type="text" ></td> <td><input type="text" ></td> <td><input type="text" ></td> <td><a class="btn btn-sm btn-success">save</a></td> </tr> <tr> <td>name</td> <td>address</td> <td>age</td> <td><a onclick="toggle('edit1');" class="btn btn-sm btn-primary">edit</a></td> </tr> <tr id="edit1"> <td><input type="text" ></td> <td><input type="text" ></td> <td><input type="text" ></td> <td><a class="btn btn-sm btn-success">save</a></td> </tr> </table>

Answer 5

the default value of display propery of tr is table-row but not block ,so the design is changed.

You should replace 'block' with 'table-row'

Answer 6

Here's a plain JavaScript way of doing toggle:

 function toggle(_id) { var x = document.getElementById(_id); x.classList.toggle("hide-me"); }

 .hide-me { display: none; }

 <div class="col-lg-6 col-lg-push-3"> <table class="table table-resposive "> <tr> <td>name</td> <td>address</td> <td>age</td> <td><a onclick="toggle('edit');" class="btn btn-sm btn-primary">edit</a></td> </tr> <tr id="edit"> <td><input type="text"></td> <td><input type="text"></td> <td><input type="text"></td> <td><a class="btn btn-sm btn-success">save</a></td> </tr> </table> </div>