如何在不改變單元格的寬度和排序的情況下隱藏/顯示tr標籤

嗨我會隱藏/顯示錶中的一行但是當單擊以再次顯示行時設計更改隱藏行的列縮小第一行中的一列我的代碼如何在不改變單元格的寬度和排序的情況下隱藏/顯示tr標籤

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>

來源

2017-07-22 Abbas Mohammed

這是因爲你是顯示行作爲塊。嘗試使用visibility == "hidden"而不是display

編輯：或者您可以使用display = "table-row"如下所示。使用visibility == "hidden"將隱藏該行，但它仍將佔用與以前相同的空間。

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>

片段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>

來源

2017-07-22 15:05:09 Munawir

如果什麼有 –

多行@AbbasMohammed檢查更新的答案。我已經插入了2個片段，以便您可以檢查兩個行爲 – Munawir

我認爲您需要第二個使用'display =「table-row」' – Munawir

設置你的td固定寬度的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>

來源

2017-07-22 15:06:25 ewwink

謝謝我使用引導程序 –

您可以使用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>

來源

2017-07-22 15:14:15 ThilinaMD

這真棒謝謝 –

如何讓行移動到頂部

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>

來源

2017-07-22 15:19:52

也通過使用'display =「表格行」 – ThilinaMD

displaytr的默認值是table-row但不是block，所以設計被改變。

，就應該替換「塊」與「錶行」

來源

2017-07-22 15:25:56 Kermit

如何在不改變單元格的寬度和排序的情況下隱藏/顯示tr標籤

回答

相關問題