隐藏表中的特定行吗？

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 
} 

这将工作。希望它能解决你的问题。