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将为您工作。

＆＃13;

var options = document.querySelectorAll('option')
var headers = document.querySelectorAll('th')
options[3].style.display = "none"
headers[2].style.display = "none"

＆＃13;

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

＆＃13;

Answer 2

如果我正确理解您的问题，您应该只需要为要隐藏的元素添加一个类，然后使用该类应用＆＃39; display：none＆＃39;对那些元素。

在这里，fiddle更新了我的意思。

以下是该小提琴的相关代码：

HTML

discarded

CSS

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

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 
}

这会奏效。希望它能解决你的问题。

隐藏表格中的特定行？

3 个答案: