0

このスクリプトは、HTMLテーブルの新しい行を複製することを想定しています。名前、ID、属性をインクリメントしていないようです。私は何が間違っているのですか？動作していない他の唯一のことは、＃endtime_ *の前の入力IDから値を取得し、それを#starttime_ *の複製された入力IDに入れることですが、これは、行を複製するときに増分しているように見えるためです。 。

<script type="text/javascript">
function MaskTime(){
    var index = $("#TimeCard tbody>tr").length-1;

$('#endtime_'+index).mask("99:99 aa");
$('#starttime_'+index).mask("99:99 aa");    
}
function update_rows(){
    $("#TimeCard tbody>tr:odd").css("background-color", "#FFF");
    $("#TimeCard tbody>tr:even").css("background-color", "#999");
}
$(document).ready(function() {
    $("#addrow").click(function() {
        var row = $('#TimeCard tbody>tr:last').clone(true).insertAfter('#TimeCard tbody>tr:last');
        var index = $("#TimeCard tbody>tr").length-1;
        var endvalue = $('#endtime_'+index-1).val();
        $("td:eq(0) select").attr("name", 'type_'+index).attr("id", 'type_'+index).addClass("validate[required]").val('')
        $("td:eq(1)").html("&nbsp;")
        $("td:eq(2) select").attr("name", 'propid_'+index).attr("id", 'propid_'+index).addClass("validate[required]").val('')
        $("td:eq(3)").html("&nbsp;")
        $("td:eq(4) input").attr("name", 'starttime_'+index).attr("id", 'starttime_'+index).addClass("validate[required,custom[timeclock]]").val(endvalue)
        $("td:eq(5) input").attr("name", 'endtime_'+index).attr("id", 'endtime_'+index).addClass("validate[required,custom[timeclock]]").val('')
        $("td:eq(6)").html("&nbsp;")

        update_rows();
        MaskTime();

      return false;
    });
}); 
</script>
4

2 に答える 2

1

質問の最初の部分について：

名前、ID、属性をインクリメントしていないようです。

あなたのスクリプトは、属性などを変更したいtdsがどこにあるかについて適切なコンテキストを提供していません.

新しい変数「newrow」を追加して (DOM 呼び出しを減らすため)、td:eq(#) に関連するコード行を変更して、これを修正する変更を次に示します...

$(document).ready(function() {
    $("#addrow").click(function() {
        var row = $('#TimeCard tbody>tr:last').clone(true).insertAfter('#TimeCard tbody>tr:last');
        var index = $("#TimeCard tbody>tr").length-1;
        var endvalue = $('#endtime_'+index-1).val();
        var newrow = $("#TimeCard tbody>tr:last");
        newrow.children("td:eq(0)").children("select").attr("name", 'type_'+index).attr("id", 'type_'+index).addClass("validate[required]").val('')
        newrow.children("td:eq(1)").html("&nbsp;")
        newrow.children("td:eq(2)").children("select").attr("name", 'propid_'+index).attr("id", 'propid_'+index).addClass("validate[required]").val('')
        newrow.children("td:eq(3)").html("&nbsp;")
        newrow.children("td:eq(4)").children("input").attr("name", 'starttime_'+index).attr("id", 'starttime_'+index).addClass("validate[required,custom[timeclock]]").val(endvalue)
        newrow.children("td:eq(5)").children("input").attr("name", 'endtime_'+index).attr("id", 'endtime_'+index).addClass("validate[required,custom[timeclock]]").val('')
        newrow.children("td:eq(6)").html("&nbsp;")

        update_rows();
        MaskTime();

      return false;
    });
});

また、上記でjsfiddleを作成しました：http://jsfiddle.net/m78UN/2/

2番目の問題について説明するとき、私はあなたが望んでいることに従っていません:

他に機能していない唯一のことは、#endtime_* の前の入力 ID から値を取得し、それを #starttime_* の複製された入力 ID に入れることです。

...だから、私はそれに対処しようとはしませんでした。

于 2012-04-26T19:46:29.393 に答える
0

やっているすべてのことを、より簡単な方法で行うことができると思います。元の HTML はありませんが、代替案としてこれを確認してください。主に次の 3 つのことを行います。

  1. ものを見つけるために使用される ID を削除しました
  2. キャッシュセレクター
  3. クラスを時間入力に追加して、参照しやすくします
  4. 削除されたMaskTime()機能

コードは次のとおりです。

$(document).ready(function() {
  var $timecard = $("#TimeCard");
  var $tbody = $timecard.find("tbody");
  var $rows = $tbody.children("tr");
  $("#addrow").click(function(e) {
    e.preventDefault(); // clearer than return false
    var $lastRow = $tbody.find("tr:last-of-type");
    var lastEnd = $lastRow.find(".endTime").val();
    var $newRow = $lastRow.clone(true).appendTo($tbody);
    var $cols = $newRow.find("td");
    var index = $rows.length - 1;
    $cols.eq(0).find("select").attr("name", 'type_' + index).addClass("validate[required]").val('');
    $cols.eq(1).empty();
    $cols.eq(2).find("select").attr("name", 'propid_' + index).addClass("validate[required]").val('');
    $cols.eq(3).empty();
    $cols.eq(4).find("input").attr("name", 'starttime_' + index).addClass("time startTime validate[required,custom[timeclock]]").val(lastEnd);
    $cols.eq(5).find("input").attr("name", 'endtime_' + index).addClass("time endTime validate[required,custom[timeclock]]").val('');
    $cols.eq(6).empty();
    update_rows(); // no idea what this is
    $newRow.find(".time").mask("99:99 aa"); // MaskTime() just did this
  });
});
于 2012-04-26T19:16:28.267 に答える