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/

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

唯一不起作用的另一件事是从 #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 回答