隱藏表中的特定行嗎？

Question

在選擇下拉字段：數據庫我想隱藏特定的行，但只有數據庫下的字段。如何在保持其他人就位的同時只隱藏部分行？我試圖使用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>

http://jsfiddle.net/wf7j5tn8/

Answer 1

您可以將類行，或者只是使用任何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> 
 
\t <th>Number</th> 
 
\t <th>First Name</th> 
 
\t <th>Last Name</th> \t \t 
 
\t <th>Points</th> 
 
</tr> 
 
<tr> 
 
\t <td>1</td> 
 
\t <td>Eve</td> 
 
\t <td>Jackson</td> \t \t 
 
\t <td>94</td> 
 
</tr> 
 
<tr> 
 
\t <td>2</td> 
 
\t <td>John</td> 
 
\t <td>Doe</td> \t \t 
 
\t <td>80</td> 
 
</tr> 
 
<tr> 
 
\t <td>3</td> 
 
\t <td>Adam</td> 
 
\t <td>Johnson</td> \t \t 
 
\t <td>67</td> 
 
</tr> 
 
<tr> 
 
\t <td>4</td> 
 
\t <td>Jill</td> 
 
\t <td>Smith</td> \t \t 
 
\t <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>

Answer 2

如果我正確理解你的問題，你應該能夠只是一個類添加到要隱藏的元素，然後使用該類申請「顯示：無」到那些元素。

這是你的fiddle更新了我的意思。

下面是從小提琴的相關代碼：

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

Answer 3

精確的解決方案可能是這個

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

這將工作。希望它能解決你的問題。