-1

当我单击添加按钮时，我制作了一个动态表单，将一行添加到表格中，但是当我添加超过 6 行时，表格高度涵盖了字段，我如何设置这个？

这是我的代码：

<div id="table">
<table class="table table-bordered" style="border:1px solid white;">
<thead>
    <tr>
        <th style="text-align:left; width:120px;">Item</th>
        <th style="text-align:left; width:200px;">Description</th>
        <th style="width:100px;">Unit Cost</th>
        <th style="text-align:right; width:60px;">Qty</th>
        <th style="text-align:left; width:100px;">Tax</th>
        <th style="text-align:left; width:100px;">Tax</th>
        <th style="text-align:left; width:100px;">Line Total</th>
   </tr>
</thead>
<tbody>         
 <tr>        
 <td colspan=7 width=800>
 <div id="dataRows">
 <div class="fieldRow" id="template">
<select class="items" name="items" style="width:127px; float:left;" id="items"><option value="1" selected="selected" disabled="disabled"></option></select>
 <textarea name="description" id="description" class="description" style="float:left; display: block; height: 30px; width:211px; border-radius:0px; margin: -1px 0px 0;"></textarea>
 <input type="text" name="unitprice" id="unitprice" class="unitprice" style="float:left; display: block; height: 30px; width:106px; border-radius:0px; margin: -1px 0px 0;">
 <input type="text" name="quantity" id="quantity" class="quantity" style="float:left; display: block; height: 30px; width:64px; border-radius:0px; margin: -1px 0px 0;">
 <select name="firsttax" id="firsttax" class="firsttax" style=" float:left; display: block; height: 31px; width:107px; border-radius:0px; margin: -2px 0px 0;"><option value="1" selected="selected" ></option></select>
 <select name="secondtax" id="secondtax" class="secondtax" style="float:left; display: block; height: 31px; width:104px; border-radius:0px; margin: -2px 0px 0;"><option value="1" selected="selected"></option></select>
 <input type="text" name="linetotal" id="linetotal" class="linetotal" placeholder="0.00" readonly style="float:left; display: block; height: 31px; width:104px; border-radius:0px; background-color: #F0F0F0; text-align:right; margin: -2px 0px 0;">   
<input type="button"  class="button remove"  id="btnDel" value="Remove Row" style="float:right; margin:0 -110px; color: #ffffff; background-color: #d9534f; border-color: #d43f3a; padding: 3px 10px; margin-bottom: 0; font-size: 14px; font-weight: normal; line-height: 1.428571429; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer;  border:1px solid transparent; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;" />
 </div>
 </div>
 </td>
 </tr>
 <input type="hidden" id="itemscounter" name="itemscounter" value=""/>
 <tr>            
 <td colspan=7 rowspan=2 width=800 style="border:0px solid white;">
 <div style="border:1px solid #DDDDDD; width:317px; height:50px; margin:0 -1px; float:right;">
<label class="required" id="invoicetotal" for="Invoicetotal" style="padding-top:3px;">Invoice Total(USD)</label>
<span style=" font-weight:bold; margin:4px -204px 0; float:right;">$</span> 
<input type="text" class="required" id="invoicetotalamount" name="invoicetotalamount" placeholder="0.00" readonly style=" color:#526273; font-weight:bold; text-align:left; border: 0px solid #000000;"/><br>
<label class="required" id="paidtodate" for="paidtodate" style="margin-top: -6px;">Paid to date</label>
<input type="text" class="required" id="paidtodateamount" name="paidtodateamount" placeholder="0.00" style=" color:#526273; font-weight:bold; text-align:right; border: 0px solid #000000;"/>       
</div> 
<div class="clear"></div>
<div style="border:1px solid #DDDDDD; width:317px; height:33px; margin:50px -316px 0; float:right;">
<label class="required" id="balance" for="balance" style="margin-top:0px;">Balance(USD)</label> 
<span style=" font-weight:bold; margin:7px 45px 0; float:left;">$</span>    
<input type="text" class="required" id="balanceamount" name="balanceamount" placeholder="0.00" readonly style=" color:#526273; font-weight:bold; text-align:left; border: 0px solid #000000;"/> 
</div>   
 </td>       
 </tr>
</tbody>
</table>
</div>
<label class="required" for="invoices_invoicesbundle_invoicestype_notes">Notes</label>
<input id="invoices_invoicesbundle_invoicestype_notes" type="text" maxlength="255" required="required" name="invoices_invoicesbundle_invoicestype[notes]">

这是我的CSS：

#table{
float: left;
height: 200px;
margin: -291px 19px 0;
width: 825px;
}

#invoices_invoicesbundle_invoicestype_notes{
margin-top:250px;
}

这是我的错误：

在此处输入图像描述

4

1 回答 1

1

如果添加更多行，则注释输入通常应遵循流程。看起来像一个浮动明确的问题。请查看是否添加到#table css

overflow:hidden;

有帮助。

如果不是，您可能需要在“添加处理程序”上的 jquery 代码中为表格添加更多高度。为此，我们需要代码但是从您展示的代码来看，它更像是第一个

更新：

然后尝试通过像这样在输入周围包裹一个 div 来清除表格浮动（现在使用内联样式，仅用于测试）

<div style="clear: left;">
<label class="required" for="invoices_invoicesbundle_invoicestype_notes">Notes</label>
<input id="invoices_invoicesbundle_invoicestype_notes" type="text" maxlength="255" required="required" name="invoices_invoicesbundle_invoicestype[notes]">
</div>
于 2013-10-12T10:45:51.523 回答