如何为动态可编辑的表列添加日期选择器功能 - how to add datepicker functionality to dynamically editable table column

how to add datepicker functionality to dynamically editable table column

我有一个很好的代码片段，当我不得不在上面添加日期拾取器时，问题就开始了。

工作示例:

<td 
    id="test_<?php echo $id; ?>" 
    title="Double click to edit"
    class="editable" 
    name="ExpiryDate_<?php echo $id; ?>"
>
    <?php echo $Expiry_Date; ?>
</td>
 <script>
    $(document).ready(function () {
        $(".editable").dblclick(function () {
            var OriginalContent = $(this).text();
            var pieces = $(this).attr("name");
            ID= pieces;
            var count = 1;
            $(this).addClass("cellEditing");
            count += 1;
            $(this).html("<input id='t1_"+count+"'placeholder='Click to open calendar' type='text'  value='' />");
            $(this).children().first().focus();

            $(this).children().first().keypress(function (e) {
                if (e.which == 13) {
                    var option = confirm('Are you sure u wanna change');
                    if(option){
                   ..
                    //Call the server side file to communicate with database.
                   //send do some staff mostly send GET xmlhttp.send();
                 ..
                }
            });
            $(this).children().first().blur(function(){
            $(this).parent().text(OriginalContent);
            $(this).parent().removeClass("cellEditing");
            });
        });
        </script>

在$(this).children().first().focus();

下添加日期选择器

var origFocus = document.activeElement;
$("input[id *='t1_']").on('click',function() {
      $(this).datepicker({
                        dateFormat: "dd-mm-yy"
                        }).focus();
       }).blur(function(){
              origFocus.focus();
                        });

和这个日期picker工作得很好，我可以让dapicker动态显示，点击日期而不关闭可编辑字段，在日期picker小部件上接近焦点返回可编辑字段，我可以单击Enter键==13，这样我就可以使用get将日期发送到服务器，问题是当我单击页面小部件上的任何地方只是重新打开时，我尝试了很多调整使其消失，但我真的不知道该怎么做我卡住了。

我想提到的网站使用bootstrap v3.1.1和jquery 1.11.1

小提琴

添加小提琴，如果我删除

$(this).children().first().blur(function(){
        $(this).parent().text(OriginalContent);
        $(this).parent().removeClass("cellEditing");
        });

然后我不能离开可编辑字段，但是如果我离开那部分代码，我就不能使日期选择工作。选择日期后，应该再次关注可编辑字段，以便用户可以单击enter发送GET

也许你应该提供一些摆弄，但从我可以看到错误的代码行是:

var origFocus = document.activeElement;
$("input[id *='t1_']").on('click',function() {
      $(this).datepicker({
                        dateFormat: "dd-mm-yy"
                        }).focus();
       }).blur(function(){
              origFocus.focus();
                        });

您不应该将焦点设置在origFocus变量上，因为这样做会将焦点重新应用到元素上。试试这些选项:

$("input[id *='t1_']").on('click',function() {
      $(this).datepicker({
                        dateFormat: "dd-mm-yy"
                        }).focus();
       }).blur(function(){
              document.activeElement.focus();
                        });

或

$("input[id *='t1_']").on('click',function() {
      $(this).datepicker({
                        dateFormat: "dd-mm-yy"
                        }).focus();
       }).blur(function(){
              document.activeElement = null;
                        });

或者根本不设置blur处理程序。

编辑

好的，我稍微清理了一下。希望能有所帮助

jsfiddle