.clone似乎不會增加

Question

此腳本假設克隆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> 

Answer 1

我認爲你可以以一種更簡單的方式做你正在做的一切。我沒有您的原始HTML，但請檢查此作爲一種可能的選擇。它主要做三兩件事：

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 
    }); 
}); 

Answer 2

對於您的問題的第一部分：

它似乎不會增加名稱，id，屬性。

你的腳本是不是給了TDS在哪裏您要修改的attribues適當的上下文等

下面是糾正了修飾，增添了新的變數「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(" ") 
     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(" ") 
     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(" ") 

     update_rows(); 
     MaskTime(); 

     return false; 
    }); 
}); 

而且，我犯了一個的jsfiddle上述：http://jsfiddle.net/m78UN/2/

我不是跟隨wh在你想，當你描述你的第二個問題：

不工作的唯一的另一件事是得到＃endtime_ *先前輸入的ID值，並把它在#starttime_的克隆輸入ID *

...所以我沒有試圖解決這個問題。