两个表在一个表中隐藏行时移动?

时间:2015-11-17 18:03:18

标签: javascript jquery css html-table

当我选择一个下拉列表时,我想隐藏一个表中的特定行而不移动另一个表。如何固定表格,以便在隐藏某些内容后不会移动?我想在左下方的桌子上添加spacer,但它仍然在Chrome / IE 10中移动。需要它适用于这两种浏览器。

这是小提琴:http://jsfiddle.net/xha4tb74/4/ 我选择数据库字段时调用行的更改。

onchange="database_details();"

1 个答案:

答案 0 :(得分:1)

你只是希望桌子在顶部保持对齐吗?如果是这样,你可以在td上设置valign属性。

以下代码并在此处更新了小提琴: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>