Question

我正在研究动态表格。当我添加行数字文本框和日期选择器工作正常。但是当我在保存数字文本框和日期选择器后编辑此行时，虽然我使用firebug检查行时数字和日期文本框包含与以前相同的类。

这是我的代码

表格Html

<tr class="entryForm1">
    <td style="padding: 7px 20px;"><input type="text" /></td>
    <td style="padding: 7px 20px;"><input type="text" class="numericTextbox" /></td>
    <td>
        <select>
            <option>Development</option>
            <option>Hr</option>
        </select>
    </td>
    <td style="padding: 7px 20px;"><input type="text" class="datepicker" /></td>
    <td style="padding: 7px 20px;">  <img src="~/images/icons/save.png" class='btnSave' alt="Edit" style="border-width: 0px;" />
        <img src="~/images/icons/delete.png" alt="Delete" style="border-width: 0px;" class='btnDelete' /></td>
</tr>

js文件上的Save方法

function Save() {
    var par = $(this).parent().parent(); //tr
    var tdName = par.children("td:nth-child(1)");

    var tdTAge = par.children("td:nth-child(2)");
    var tdDesignation = par.children("td:nth-child(3)");

    var tdDate = par.children("td:nth-child(4)");
    var tdIcon = par.children("td:nth-child(5)");
    tdName.html(tdName.children("input[type=text]").val());

    tdTAge.html(tdTAge.children("input[type=text]").val());
    tdDesignation.html(tdDesignation.children("select").val());

    tdDate.html(tdDate.children("input[type=text]").val());


    tdIcon.html("<img src='../../images/icons/update.png' class='btnEdit'/><img src='../../images/icons/delete.png' class='btnDelete'/>");

    $(".btnEdit").bind("click", Edit);
    $(".btnDelete").bind("click", Delete);
}

创建问题的编辑方法

function Edit() {
    var par = $(this).parent().parent(); //tr
    var tdName = par.children("td:nth-child(1)");
    var tdAge = par.children("td:nth-child(2)");
    var tdDesignation = par.children("td:nth-child(3)");
    var tdDate = par.children("td:nth-child(4)");
    var tdIcon = par.children("td:nth-child(5)");
    tdName.html("<input type='text' value='" + tdName.html() + "'/>");
    tdAge.html("<input type='text' id='txtAge' class='numericTextbox'  value='" + tdAge.html() + "'/>");
    tdDesignation.html("<select>" +
            "<option>Development</option>" +
            "<option>H</option>" +
            "</select>");

    tdDate.html("<input type='text' class='datepicker hasDatepicker' value='" + tdDate.html() + "'/>");

    tdIcon.html("<img src='../images/icons/save.png' class='btnSave'/>");

    $(".btnSave").bind("click", Save);
    $(".btnEdit").bind("click", Edit);
    $(".btnDelete").bind("click", Delete);
}

当我添加新行时

function Add() {

    $.datepicker.setDefaults({dateFormat: 'dd-mm-yy'});
    $('.datepicker').datepicker();
    var newRow = $('#tblCadastro tbody>tr:first').clone(true);


    $('input', newRow).val('').
            filter('.hasDatepicker').removeClass('hasDatepicker').datepicker();
    $('#tblCadastro tbody').append(newRow);
    newRow.appendTo('#tblCadastro tbody').show('slow');
    $('input', newRow).val('').
            filter('.hasDatepicker').removeClass('hasDatepicker').attr('id', '').datepicker();

    $('select', newRow).filter('.dropDown').attr('id', 'o1');
    $('div', newRow).filter('.chzn-container').attr('id', 'o1');

    $(".btnSave").bind("click", Save);
    $(".btnDelete").bind("click", Delete);
}

预感谢。

Answer 1

最后我用

解决了我的问题

$("#tblCadastro").on("keypress", "#txtAge", function (evt) {


    var charCode = (evt.which) ? evt.which : event.keyCode;
    if (charCode != 46 && charCode > 31
      && (charCode < 48 || charCode > 57))
        return false;

    return true;
});

数字文本框和日期选择器不在js文件中工作

1 个答案: