-1

我是 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>

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

4

3 回答 3

1

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

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

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

于 2013-01-20T22:30:04.780 回答
0

将每个下拉列表/数字对包含在<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 代码。

于 2013-01-20T22:14:00.873 回答
0

您可以采取以下方法：

<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 {
    ....
}

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

于 2013-01-20T22:29:46.760 回答