Question

我是jQuery和PHP的新手，所以我知道我的编码非常粗糙，但我需要帮助。

我的PHP编码：

<td style="width: 39px; height: 30px;">

<select id="choice" name="choice" class="ddl" style="width: 150px">
<?php foreach($xml->children() as $pizza){ ?>
<option value="<?php echo $pizza; ?>" selected=""><?php echo $pizza; ?></option>
<?php }?>
</select></td>
        <td style="height: 30px; width: 32px;">
        <input id="num" name="num" class="dd2" style="width: 46px" 
        type="number"></td>
        <td style="height: 30px; width: 91px;">
        <input TYPE = "button" id="addbt" Name = "addbt" VALUE = "Add Pizza" class="auto-style1"></td>
        <td style="height: 30px">
        <input TYPE = "button" id="removebt" Name = "removebt" VALUE = "Remove A Pizza" class="auto-style1"></td>
    </tr>
    <tr>
        <td style="width: 131px; height: 30px;">&nbsp;</td>
        <td style="width: 39px; height: 30px;">

        &nbsp;</td>
        <td style="height: 30px; width: 32px;">
        &nbsp;</td>
        <td style="height: 30px" colspan="2">
        &nbsp;</td>
    </tr>
    <tr>
        <td style="width: 131px">


     <INPUT TYPE = "Submit" Name = "Submit1" VALUE = "Submit Order"></td>
        <td colspan="4"><input id="reset" type="button" value="Reset   Order"></td>
    </tr>
</table>
&nbsp;&nbsp;<p>&nbsp;</p> &nbsp;&nbsp;
</form>

jQuery编码是：

<script type="text/javascript">

 $("#addbt").click(function () {
 $('#choice').clone()
     .attr('id', 'choice' + $('.ddl').length)
     .attr('name', 'choice' + $('.ddl').length)
     .insertAfter(".ddl:last");
 $('#num').clone()
     .attr('id', 'num' + $('.dd2').length)
     .attr('name', 'num' + $('.dd2').length)
     .insertAfter(".dd2:last");});

 $("#removebt").click(function () {
 $("#choice1").remove();
 $("#num1").remove();
 });    


 $('#reset').click(function() {
 location.reload();});
 </script>

如何影响克隆的布局？当我创建超过五个克隆时，它们的高度不再相等。

Answer 1

您的输入和选择元素有不同的边距，因此添加此CSS规则会修复它：

#table input, #table select {
    margin: 2px;
}

http://jsfiddle.net/A6h24/4/

Answer 2

将每个下拉列表/数字对包含在<TD>标记中，以使其保持配对。您的HTML正文设计不合理，这就是您制作此错误的原因。现在你有一个<TD>用于选择而一个<TD>用于输入......所以你有两个独立的字符串HTML实体包含不同的类别......这会导致不匹配，因为它们都是独立的。

<td style="width: 39px; height: 30px;">         
    <select id="choice" name="choice" class="ddl" style="width: 150px"></select>
    <input id="num" name="num" class="dd2" style="width: 46px" type="number">
</td>

你也必须重写一下你的JS代码。

Answer 3

您可以采取以下方法：

<td colspan="2">
    <div class="pizza-order-line">
        <select ... ></select>
        <input ... />
    </div>
</td>

在你的CSS中：

div.pizza-order-line select {
    margin-right: 4px;
}

div.pizza-order-line input {
    ....
}

通过这种方式，您可以合理地确定浏览器“知道”需要排队的内容。但是，如果您在表格单元格中放置了多个项目，除非它们具有保证的高度，否则它们将无法正确排列。

HTML表单布局问题

3 个答案: