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 に答える