Javascript .clone似乎没有递增

假设此脚本克隆HTML表的新行。它似乎没有增加名称、id和属性。我做错了什么？唯一不起作用的另一件事是从以前的输入id endtime_*中获取值，并将其放入克隆的输入id 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>

---

我认为你可以用一种更简单的方式做你正在做的每件事。我没有你的原始HTML，但请检查此作为一个可能的替代方案。它主要做三件事：

删除了用于查找内容的ID 缓存选择器 将类添加到时间输入中以使其更易于引用 删除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
  });
}); 

---

关于问题的第一部分：

它似乎没有增加名称、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(" ")
        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;
    });
});

此外，我还对上述内容做了一个JSFIDLE：

当你描述你的第二个问题时，我没有遵循你想要的：

唯一不起作用的另一件事是从以前的输入id endtime_*中获取值，并将其放入克隆的输入id starttime中_*

---

…所以我没有试图解决这个问题。

任何一种方法都不起作用。它似乎是使每一个1，而不是增加1到它。。。理论上，下一次调用'propid_'+索引时，应检查更新版本。它更简单，不再像以前那样依赖索引。希望它能解释一下你做错了什么。！我设置了一个JSFIDLE。。。现在你可以看到我的一些问题了。谢谢你的回复。我还用实际的桌子做了一把小提琴。它仍然没有做它需要做的事情。添加第三行后，当您只单击其中一行时，掩码将立即应用于所有starttime输入或所有endtime输入。validate类来自formValidator，它一次应用于所有字段，即使有些字段具有良好的条目。不幸的是，加载脚本后，很难在JSFIDLE中重新创建。我试图解决的另一个问题是获取用户输入的值，比如endtime_1，当他们单击add row按钮时，它会自动将其放入starttime_2的输入值中