.clone, похоже, не увеличивается.

Question

Этот скрипт должен клонировать новую строку таблицы HTML. Похоже, что это не увеличивает имя, id, атрибуты. Что я делаю не так? Единственное, что не работает, это получить значение из предыдущего идентификатора ввода # endtime_ * и поместить его в клонированный входной идентификатор # starttime_ *, хотя я думаю, что это потому, что он, кажется, увеличивается, поскольку он клонирует строку ,

<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, но проверьте это как возможную альтернативу. Это в основном делает 3 вещи:

1. Удалены идентификаторы, используемые для нахождения вещей
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

Задать вопрос о:

Это не похоже на увеличение имени, идентификатора, атрибутов.

Ваш сценарий не дает надлежащий контекст для где Лобова является, для которого вы хотите изменить attribues и т.д.

Вот модификация, которая исправляет это, добавив новый переменный «NewRow» (для уменьшения DOM вызовов) и изменения строк кода, связанного с тД: эк (#) ...

$(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/

Я не после при желании вы, когда вы описываете вашу вторую проблему:

Единственная вещь, которая не работает, это получить значение из предыдущего входного ид # endtime_ * и положить его в клонированной входной идентификатор #starttime_ *

... поэтому я не пытался это решить.