Comment cacher/montrer tr tag dans le tableau sans changer la largeur et le type de cellules

Question

Salut je cacherais/afficher une ligne de la table Mais lorsque cliquez pour afficher à nouveau la ligne le changement de conception Les colonnes de la ligne cachée se rétrécissent sous une colonne de première ligne Mon code

function toggle(tr_id) 
 
{ 
 
\t 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>

Answer 1

C'est parce que vous affichez la ligne en bloc. Essayez d'utiliser visibility == "hidden" au lieu de display

EDIT: Vous pouvez également utiliser display = "table-row" comme indiqué ci-dessous. L'utilisation visibility == "hidden" masquera la ligne, mais elle occupera toujours le même espace qu'avant.

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

function toggle(tr_id) 
 
{ 
 
\t 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) 
 
{ 
 
\t 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 2

mis votre td avec une largeur fixe css

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 { 
 
\t width: 140px; 
 
\t 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 3

Vous pouvez utiliser display="table-row"

<script> 
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"; 
    } 
} 
</script> 

Answer 4

comment faire déplacer la ligne vers le haut

function toggle(tr_id) 
 
{ 
 
\t 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

la valeur par défaut de display propery de tr est table-row mais pas block, donc le design est changé.

Vous devez remplacer « bloc » par « table-row »