Question

我正在尝试隐藏ID为site_id的输入字段。当我运行代码时，该字段被隐藏，但仍占用空间。

<!--MANAGEMENT DEPARTMENT-->
<div class="tab-pane" id="department">  
    <div class="container center" id="dept-container">
        <h3 class="center">Departments Management</h3>
        <table class="table table-striped table-hover" id="table-manage-user">
            <thead>
            <tr>
                <td><label>Name</label></td>
                <td><label>Email</label></td>
                <td><label>Phone</label></td>

            </tr>
            </thead>
            <tr>
                <form method="post" action="temp.php">
                <td><input type="text" class="form-control" placeholder="Name" autofocus name="depart_name" id="depart_name" required aria-required="true"></td>
                <td><input type="text" style="display: none" class="site_id" placeholder="siteID" disabled="disabled"name="site_id" id="site_id"  value= ""></td>
                <td><input type="email" class="form-control" placeholder="Email" autofocus name="depart_email" id="depart_email" ></td>
                <td><input type="text" class="form-control" placeholder="Phone" autofocus name="depart_phone" id="depart_phone" required aria-required="true"></td>
                </form>
            </tr>

        </table>
    </div>        
</div>

任何人都可以告诉我如何隐藏它而不占用任何空间吗？

Answer 1

将样式添加到<td>标记中。

你并没有隐藏标签，所以它仍然占据了空间。＆＃34;

此外，最好使用CSS代替硬编码样式到标签中，因为它可以更容易维护（比如你想要将隐藏的标签更改为灰色，你只需要更改班级样式，所有页面都会更新）：

HTML

<td class="inactive"> <input ... /> </td>

CSS

.inactive { display:none }

Answer 2

我认为最好将输入类型更改为隐藏，但为了避免额外的单元格，您应该将“display：none”移动到td标记：

            <td style="display: none"><input type="text" class="site_id" placeholder="siteID" disabled="disabled"name="site_id" id="site_id"  value= ""></td>

Answer 3

不要隐藏input，而是隐藏td，如下面的代码所示：

<强> HTML ：

<!--MANAGEMENT DEPARTMENT-->
<div class="tab-pane" id="department">  
    <div class="container center" id="dept-container">
        <h3 class="center">Departments Management</h3>
        <table class="table table-striped table-hover" id="table-manage-user">
            <thead>
            <tr>
                <td><label>Name</label></td>
                <td><label>Email</label></td>
                <td><label>Phone</label></td>

            </tr>
            </thead>
            <tr>
                <form method="post" action="temp.php">
                <td><input type="text" class="form-control" placeholder="Name" autofocus name="depart_name" id="depart_name" required aria-required="true"></td>
                <td id="site_id_td"><input type="text" class="site_id" placeholder="siteID" disabled="disabled"name="site_id" id="site_id"  value= ""></td>
                <td><input type="email" class="form-control" placeholder="Email" autofocus name="depart_email" id="depart_email" ></td>
                <td><input type="text" class="form-control" placeholder="Phone" autofocus name="depart_phone" id="depart_phone" required aria-required="true"></td>
                </form>
            </tr>

        </table>
    </div>        
</div>

<强>的Javascript ：

$("#site_id_td").hide();

here是JSFiddle。

Answer 4

在表格

的标签中使用以下代码

<td style="display: none"> </td>

因此空间将被删除。希望这会有所帮助......

隐藏html中的文本字段占用空间

4 个答案:

HTML

CSS