0

所以我有一个应用程序，用户应该能够添加不确定数量的配对文本框，这些文本框代表要提交到数据库的人的姓名和电话号码。相关标记如下...

<div id="divAddVoters">
            <form class="formee" action="">
                <fieldset id="appendVoters">
                    <legend>Enter Voter Name and Phone Number:</legend>
                    <!--<div id="appendVoters">-->
                        <div class="grid-4-12" id="appendVoterName">
                            <label>Name:</label>
                            <input type="text" class="txtAddVoter" value="" />
                        </div>
                        <div class="grid-4-12" id="appendVoterNumber">
                            <label>Phone Number</label>
                            <input type="text" class="txtAddNumber" value="" />
                        </div>
                        <div class="grid-4-12"></div>
                    <!--</div>-->
                    <div class="grid-12-12">
                        <button id="btnAddVoter" class="formee-button" 
                                onclick="addVoter(); return false;">ADD VOTER</button>
                        <button id="btnSubmitVoters" class="formee-button" 
                                onclick="submitVoters(); return false;">SUBMIT VOTER(S)</button>
                        <p id="pError"></p>
                    </div>
                </fieldset>
            </form>
        </div>

...因此，如果用户btnAddVoter多次选择按钮，则应将任意数量的txtAddVoter文本框添加到 div 中appendVoterName，并将txtAddNumber文本框添加到 divappendVoterNumber中。执行此操作的 javascript 函数如下...

function addVoter()
            {
                $('fieldset#appendVoters div#appendVoterName').append("<label>Name</label><input type='text'" +  
                                "class='txtAddVoter' value='' />");

                $('fieldset#appendVoters div#appendVoterNumber').append("<label>Phone Number</label>" +
                                "<input type='text' class='txtAddNumber' value='' />");
            }

我Formee用来让一切看起来都很好，这解释了fieldset,legend和form class="formee"（我的应用程序实际上是完全javascript驱动的，所以我根本不需要表单，除非formee样式需要它）。问题是图例标签绘制的边框不会随着添加到其中的元素而增长，因此当用户添加文本框时，它们最终会超出图例的边界，越过按钮，整个事情看起来完全荒谬。

我想知道使图例边框随着包含的文本框元素的数量而增长的最佳方法是什么。我正在考虑维护文本框的数量，当它们达到一定数量时，使用 javascript/jQuery 来更改 Formee 样式表以使图例更大？不过，不太确定如何去做，寻找一些好主意。

编辑 - 好的，这是 CSS 的相关部分......

.formee fieldset {
    border: 1px solid #d4d4d4;
    position: relative;
    height:30%;
    padding: 1.2em 0;
    margin: 0 0 4em;
}

我想要做的是，每次用户添加一个文本框对时，读出 height 属性值，将该值加倍，然后将此值设置为此 CSS 规则中的新高度。这可能吗？

编辑 - 我最终用这个功能实现了它......

    function doubleFieldSetSize(divName)
    {
        var height = $('fieldset#' + divName).css('height');
        height = height.replace(/px$/, '');
        height = parseInt(height) + 70;
        height = height + "px";
        $('fieldset#' + divName).css('height', height);
    }
4

1 回答 1

0

尝试添加这个css、float和height？

.formee fieldset {
    float:left;
    height:auto;
    border: 1px solid #d4d4d4;
    position: relative;    
    padding: 1.2em 0;
    margin: 0 0 4em;
}
于 2013-06-12T04:31:05.877 回答