[英]Hide a specific row in table?
在選擇下拉字段時:數據庫我想隱藏特定的行,但只隱藏數據庫下的字段。 我如何只隱藏行的一部分,而將其他行保持在原處? 我嘗試使用JQUERY並將ID附加到該行,但是整行都在刪除,我想保留右側。
我知道我可以進行樣式可見性:隱藏,但是如果不需要這些字段,我希望這些行消失並向上移動。
<tr>
<th>* Database</th>
<th class="th_background" style="border-right-style: groove;"><select id="database" class="form-control" name="database" onchange="database_details()">
<option value="oracle" selected="selected">Oracle</option>
<option value="mssql">Sql Server</option>
<option value="teraData">TeraData</option>
<option value="epic">Generic ODBC(Chronicles)</option>
<option value="sas">SAS</option>
</select>
</th>
<th class="th_background"><input type="radio" name="refreshTde"
value="yes" checked> <span data-toggle="tooltip"
title="This option creates new TDE or replaces existing TDE file with full data.">Full
Refresh <i class="fa fa-question-circle"></i></span></th>
<th class="th_background"><input type="radio" name="refreshTde"
value="no"> <span data-toggle="tooltip"
title="This option appends existing TDE. Should have same data items in the SQL.">Incremental
Refresh <i class="fa fa-question-circle"></i></span></th>
</tr>
<tr>
<th>* Service ID</th>
<th class="th_background"><input type="text" id="sidText"
name="sid" class="form-control" style="width: 100%" placeholder="Enter SID"></th>
<th colspan="2" style="background-color: #0072bc;"><span
style="color: white;">* SQL Query to Generate TDE</span></th>
我只想隱藏和折疊此部分:
<th>* Service ID</th> <th class="th_background"><input type="text" id="sidText" name="sid" class="form-control" style="width: 100%" placeholder="Enter SID"></th>
您可以將類附加到行,或僅使用適合您的任何queryselector。
var options = document.querySelectorAll('option') var headers = document.querySelectorAll('th') options[3].style.display = "none" headers[2].style.display = "none"
<link rel="stylesheet" href="http://www.w3schools.com/stdtheme.css" type="text/css"> <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" type="text/css"> <table class="w3-table-all" style="width:100%"> <tbody><tr> <th>Number</th> <th>First Name</th> <th>Last Name</th> <th>Points</th> </tr> <tr> <td>1</td> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>2</td> <td>John</td> <td>Doe</td> <td>80</td> </tr> <tr> <td>3</td> <td>Adam</td> <td>Johnson</td> <td>67</td> </tr> <tr> <td>4</td> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> </tbody></table> <select id="database" class="form-control" name="database" onchange="database_details()"> <option value="oracle" selected="selected">Oracle</option> <option value="mssql">Sql Server</option> <option value="teraData">TeraData</option> <option value="epic">Generic ODBC(Chronicles)</option> <option value="sas">SAS</option> </select>
如果我正確地理解了您的問題,則應該能夠將一個類添加到要隱藏的元素中,然后使用該類對這些元素應用“顯示:無”。
這是我的意思更新的小提琴 。
這是小提琴中的相關代碼:
的HTML
<th class="hidden">* Service ID</th>
<th class="th_background hidden"><input type="text" id="sidText"
name="sid" class="form-control" style="width: 100%" placeholder="Enter
SID">
</th>
的CSS
.hidden {
display: none;
}
確切的解決方案可能是這樣
<th id="dataHide">* Service ID</th> <!-- add id dataHide to your th -->
//add these to js function
$("input#sidText").css("visibility", "hidden");
$("#dataHide").css("visibility","hidden");
我認為這就是您想要的: http : //jsfiddle.net/wf7j5tn8/7/
另一種方法是禁用該字段,我不想向用戶隱藏功能,而只是禁用它
$("input#sidText").prop('disabled','disabled');
的HTML
<tr id="dataHide"> <!-- id assigned here to hide the the row -->
<th>* Service ID</th>
<th class="th_background"><input type="text" id="sidText" name="sid" class="form-control" style="width: 100%" placeholder="Enter SID"></th>
<th colspan="2" style="background-color: #0072bc;"><span style="color: white;">* SQL Query to Generate TDE</span></th>
</tr>
js / jQuery
function database_details() {
$("#dataHide").hide(); //hides the id (#) dataHide assigned to the TR, hence removing the whole row.
//give this id (dataHide) to any element you want to hide on change of select dropdown
}
這將起作用。 希望它能解決您的問題。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.