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

numeric text box and date picker not working in js file

本文关键字:文件 js 工作 选择器 文本 日期 数字      更新时间:2023-09-26

我正在处理一个动态表。当我添加行数字文本框和日期选择器工作良好。但是,当我编辑这一行保存数字文本框和日期选择器不工作,虽然当我检查行使用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);
}

提前谢谢。

最后我用

解决了我的问题
$("#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;
});