Question

我正在尝试构建一个动态表单。我有克隆和屏蔽，它提交并发布到我的数据库，但现在我试图从前面的id＃endtime_ *获取值，并使其成为#starttime_ *的新动态创建的输入字段的值。 id以1开头。例如：第一行是：then next是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>

Answer 1

当您在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 ;

Answer 2

当你没有提供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+"'/>");
    });
});

添加文本值以动态创建文本输入

2 个答案: