当我选择一个下拉列表时，我想隐藏一个表中的特定行而不移动另一个表。我怎样才能把 table 固定好，一旦有东西被隐藏，它就不会移动？我正在尝试在左下角的表格中添加间隔符，但它仍在 Chrome/IE 10 中移动。需要它适用于两种浏览器。
这是 fiddle :http://jsfiddle.net/xha4tb74/4/ 选择数据库字段时，我正在调用行的更改。
onchange="database_details();"
最佳答案
您只是希望表格在顶部保持对齐吗？如果是这样，您只需在 td 上设置 valign 属性即可。
下面的代码和更新的 fiddle 在这里:http://jsfiddle.net/xha4tb74/6/
<body>
<form action="GenerateTDE" method="post" id="inputForm" class="pure-form h5-defaults pure-form-stacked">
<table align="center" style="width:1300px;">
<td valign="top">
<table>
<tr>
<th colspan="2" style="background-color: #0072bc;"><span style="color: white;">Database Details</span>
</th>
</tr>
<tr>
<th>* Database</th>
<th class="th_background">
<select id="database" class="form-control" name="database" onchange="database_details()">
<option value="oracle" selected="selected"><b>Oracle</b>
</option>
<option value="mssql"><b>Sql Server</b>
</option>
<option value="teraData"><b>TeraData</b>
</option>
<option value="epic"><b>Generic ODBC(Chronicles)</b>
</option>
<option value="sas"><b>SAS</b>
</option>
</select>
</th>
</tr>
<tr>
<th colspan="2" style="background-color: #0072bc;"></th>
</tr>
<tr class="servicerow">
<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>
</tr>
<tr class="portrow">
<th>* Port</th>
<th class="th_background">
<input type="text" id="portText" name="port" class="form-control" style="width: 30%" value="1521" placeholder="Enter port">
</th>
</tr>
<tr class="dbNamerow">
<th>* DB Name</th>
<th class="th_background">
<input type="text" id="dbText" name="dbName" style="width: 100%" class="form-control" placeholder="Enter database name">
</th>
</tr>
<tr class="dbdnsrow">
<th>* DB DNS Name</th>
<th class="th_background">
<input type="text" id="dnsText" name="url" style="width: 100%" class="form-control" placeholder="Enter DNS">
</th>
</tr>
<tr class="librefsrow">
<th>* Lib Refs</th>
<th class="th_background">
<input type="text" id="librefs" name="librefs" style="width: 100%" class="form-control" placeholder="Enter Librefs">
</th>
</tr>
<tr class="hostrow">
<th>* Host</th>
<th class="th_background">
<input type="text" id="hostText" name="host" style="width: 100%" class="form-control" placeholder="Enter host Name">
</th>
</tr>
<tr class="userrow">
<th>* Database User</th>
<th class="th_background">
<input type="text" id="userText" name="user" style="width: 100%" class="form-control" placeholder="Enter user Name">
</th>
</tr>
<tr class="passwordrow">
<th>* Database Password</th>
<th class="th_background">
<input type="password" id="passwordText" style="width: 100%" name="password" class="form-control" placeholder="Enter database password">
</th>
</tr>
<tr>
<th colspan="2" style="background-color: #0072bc;"><span style="color: white;">* Name of TDE File</span><span data-toggle="tooltip" title="TDE Name should be unique for a site and project"><i class="fa fa-question-circle"></i></span>
</th>
</tr>
<tr>
<th>Enter new TDE Name
<br>Or
<br>Select from already existing TDEs</th>
<th class="th_background">
<input type="text" id="tdeNameText" onclick="resetTDENameDropdown();" onblur="validateTdeName();" name="tdeName" style="width: 100%" class="form-control" placeholder="Enter TDE Name">Or
<br>
<select id="tdeNameDropDown" class="form-control" name="tdeNameDropDown" onchange="clearTDEName();">
<label for="tdeNameDropDown"></label>
<option value="">---Select TDE Name---</option>
</select>
</th>
</tr>
<tr>
<th colspan="2" style="background-color: #0072bc;"><span style="color: white;"></span>
</th>
</tr>
<tr>
<th>* Job Name <span data-toggle="tooltip" title="Job name should be unique for a user"><i class="fa fa-question-circle"></i></span>
</th>
<th class="th_background">
<input type="text" id="jobName" name="jobName" class="form-control" placeholder="Enter Job Name" style="width: 100%" required onblur="validateJobName();">
</th>
</tr>
<tr>
<th colspan="2" style="background-color: #0072bc;"><span style="color: white;"><input type="checkbox"
name="scheduler" id="scheduler" value="yes"
onclick="hide_time();"> Schedule TDE Generation Job </span>
</th>
</tr>
<tr>
<th>* Schedule List</th>
<th class="th_background">
<select id="cronSchedule" class="form-control" name="cronSchedule" disabled>
<label for="cronSchedule"></label>
<option value="">---Select Schedule</option>
</select> <a href="/TableauDataExtractApp-1/scheduleMainPage.jsp">Create
Schedule</a>
</th>
</tr>
<tr id="filler" style="border-bottom: #d8d8d8 .1px solid;">
<th style="height: 49px;visibility: hidden;">filler</th>
</tr>
</table>
</td>
<td>
<table style="margin-top:6px !important;">
<tr>
<th colspan="2" style="background-color: #0072bc;"><span style="color: white;">TDE Refresh Options</span>
</th>
</tr>
<tr>
<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 colspan="2" style="background-color: #0072bc;"><span style="color: white;">* SQL Query to Generate TDE</span>
</th>
</tr>
<tr>
<th class="th_background">
<input type="radio" id="query_upload" name="group1" onclick="sql_toggle();">Upload SQL File</th>
<th class="th_background">
<input type="radio" id="query_radio" name="group1" onclick="sql_toggle();">SQL Query</th>
</tr>
<tr class="uploadSQL">
<th class="th_background" colspan="2">
<input type="file" style="display: inline;" name="queryUpload" id="upload_querys">
<input type="button" onclick="formatSQL();" id="formatButton" value="Format SQL"></input>
</th>
</tr>
<tr class="textSQL">
<th colspan="2" style="background-color: #0072bc;">
<textarea rows="29" style="width: 100% !important;" id="query" placeholder="Enter query" name="query" required></textarea>
</th>
</tr>
</table>
</td>
</tr>
<tr style="
border-bottom: none;
">
<th colspan="4">
<center>
<input type="submit" class="pure-button pure-button-primary" value="Generate TDE">
<input type="button" value=" Reset " class="pure-button pure-button-primary" onclick="resets();">
</center>
</th>
</tr>
</table>
</form>
关于javascript - 在一个表中隐藏行时两个表移动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33763930/