0

我正在尝试构建一个动态表单。我将克隆和屏蔽连同它一起提交并发布到我的数据库，但现在我试图从以前的 id #endtime_* 中获取值，并将其设置为 #starttime_* 的新动态创建的输入字段的值。id 以 1 开头。例如：第一行是：然后下一行是 2，依此类推。

作为奖励，也许有人还可以告诉我如何使每个创建的行交替颜色。奇数行蓝色和偶数行白色说。

提前非常感谢！

这是到目前为止的代码。

    <script type="text/javascript">
        function maskInput(){
            $.mask.definitions['~'] = "[+-]";
            $(".time").mask("99:99 aa");

            $("input").blur(function() {
            $("#info").html("Unmasked value: " + $(this).mask());
        }).dblclick(function() {
            $(this).unmask();
        });
        }
        var clone;
        function cloneRow(){
            var rows=document.getElementById('TimeCard').getElementsByTagName('tr');
            var index=rows.length-1;
            clone=rows[index-0].cloneNode(true);
            var inputs=clone.getElementsByTagName('input'), inp, i=0,n ;
            while(inp=inputs[i++]){
                inp.name=inp.name.replace(/\d/g,'')+(index+1);
            }
            var select=clone.getElementsByTagName('select'), sel, i=0,n ;
            while(sel=select[i++]){
                sel.name=sel.name.replace(/\d/g,'')+(index+1);
            }
        maskInput();
        }
        function addRow(){
            var tbo=document.getElementById('TimeCard').getElementsByTagName('tbody')[0];
            tbo.appendChild(clone);
            cloneRow();
        }
        function checkDOM(){
            var rows=document.getElementById('TimeCard').getElementsByTagName('tr');
            for(var i=0;i<rows.length;i++){
                alert(rows[i].getElementsByTagName('input')[0].name);
            }
        }
        onload=cloneRow;
        </script>
4

2 回答 2

0

当您在 cloneRow 中创建新输入时，在它们位于 dom 中之后，您可以获取您的名称/索引并使用它们。

$('#starttime_'+index).attr('value',$('#endtime_'+index-1).attr('value'));

对于你的行，你只需要给每个人一个不同的/额外的类，然后相应地设置它

.odd { background-color:#cfcfcf; }

然后，在您的 cloneRow()

clone=rows[index-0].cloneNode(true);
if (index%2) $(clone).addClass("odd");  //added this line
var inputs=clone.getElementsByTagName('input'), inp, i=0,n ;
于 2012-04-25T20:40:48.130 回答
0

当您没有提供 HTML 代码时，很难猜测您真正想要什么，但我构建的东西至少应该为您指明正确的方向。我把它做成了一个jsfiddle，但我也会在这里发布。所以假设你的 HTML 是这样的：

<div id="inputs">
    <input class="endtime" id="endtime_123" type="text" value="endtime_123"/>
</div>

然后，此 JavaScript 将为您创建新输入，其开始时间等于另一个输入的结束时间：

$(function() {
    $('#inputs .endtime').each(function(index) {
        var endtime = $(this).attr('id').substring(8);
        $('#inputs').append("<input class='starttime' id='starttime_'"+endtime+"' value='starttime_"+endtime+"'/>");
    });
});
于 2012-04-25T20:52:57.363 回答