隐藏表中的特定行吗？
问题描述：
在选择下拉字段：数据库我想隐藏特定的行，但只有数据库下的字段。如何在保持其他人就位的同时只隐藏部分行？我试图使用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>
\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>
答
如果我正确理解你的问题，你应该能够只是一个类添加到要隐藏的元素，然后使用该类申请“显示：无”到那些元素。
这是你的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;
}
答
精确的解决方案可能是这个
<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
}
这将工作。希望它能解决你的问题。
嗯，不是entirly我所得到的。看看我的小提琴，我在每一行都有一个有多个
仍然有点困惑，但实际上所有你需要做的是显示=“无”，其他一切都将由正常流程处理，或者是打扰你？ –
如果我确实没有显示，我的桌子右侧移到左边。我试图让它的位置固定但仍然发生。 – Ben
如果我正确理解你的问题，你应该能够只是一个类添加到要隐藏的元素，然后使用该类申请“显示：无”到那些元素。
这是你的fiddle更新了我的意思。
下面是从小提琴的相关代码：
HTML
CSS
这实际上会隐藏字段，但表的右侧将移动到左侧，我希望它在固定的位置。 – Ben
现在我明白了这个问题好一点... – jennEDVT
我创建了这个简化的测试用例，以摆脱一些噪音，并更好地突出显示您遇到的问题。 http://jsfiddle.net/kr7davku/2/我还没有想出一个好的解决方案，但... – jennEDVT
精确的解决方案可能是这个
我觉得这是什么您想：http://jsfiddle.net/wf7j5tn8/7/
另一种方法是，你禁用场，我不希望对用户隐藏功能，而只是将其禁用
$("input#sidText").prop('disabled','disabled');HTML
js/jQuery
这将工作。希望它能解决你的问题。
但这将隐藏整个行，我只想隐藏前两个，而另一个则保留在那里。是否有可能使嵌套tr行，只是将宽度设置为50％？然后用它来隐藏第一个？ – Ben
在你的评论中，你会说“给这个id（dataHide）给你想隐藏的任何元素......”但是，ID不应该应用于多个元素。在这种情况下，你应该使用一个类。 – jennEDVT
@jennEDVT是的，从当前元素中删除ID并将其提供给另一个元素。我写它判断，运营商了解它“ID不应该被应用于多个元素”。 –
相关问题