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

クローンのレイアウトに影響を与えるにはどうすればよいですか? 5 つ以上のクローンを作成すると、それらの高さが等しくなくなります。

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>用と入力用ができました...つまり、異なるカテゴリを囲む 2 つの独立した文字列 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 に答える