CODEWITHSUNDEEP
javascripthtmltogglebutton
Abbas Mohammed
Abbas Mohammed

Reputation: 65

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

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>

Upvotes: 0

Views: 4039

Answers (6)

ThilinaMD
ThilinaMD

Reputation: 375

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';
  }
}

Upvotes: 1

Penny Liu
Penny Liu

Reputation: 17408

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>

Upvotes: 0

Kermit
Kermit

Reputation: 1062

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'

Upvotes: 0

Munawir
Munawir

Reputation: 3356

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>

Upvotes: 0

Abbas Mohammed
Abbas Mohammed

Reputation: 65

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>

Upvotes: 0

ewwink
ewwink

Reputation: 19154

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>

Upvotes: 0

Related Questions