javascript - 当在单元格或另一个单元格外部单击时，从单元格中删除输入元素并保留值

Question

当我单击单元格外部或另一个单元格时，我希望单元格中的输入元素消失(请注意，单击的单元格随后必须处于事件状态，具有输入元素)。并且单元格必须保留输入元素的值。

单击单元格时，必须出现输入元素(该部分已解决)。

HTML:

<table>
    <tr>
        <td>Content</td>
        <td>Content</td>
    </tr>
    <tr>
        <td>Content</td>
        <td>Content</td>
    </tr>
</table>

JavaScript:

//this part creates input in td element, allows editing cell content and 
//when enter is pressed removes input leaving the cell value (the okay part)
    $("td").click(function(){
        if($(this).find("input").length==0){
            var cellContent = $(this).html();
            $(this).empty();
            $(this).append("<input type='text' size='"+cellContent.length+"' value='"+cellContent+"'>");
            $(this).find("input").focus();
        }
        var currentCell = $(this);  

        $("input").keyup(function(event){
            if(event.which == 13){//on enter pressed
                $(this).remove();
                $(currentCell).html($(this).val());
            }
        });
    });

现在的问题:

//Here every cell but the one clicked should behave just like the cell in
// which "enter" is pressed in previous part of the code 
//I was trying smth here but I (amateur) got confused
$("*").click(function(){
   for(var i=0;i<$("td input").length;i++){
     if($(this).has("input")){
        var cellValue = $("td input:eq("+ i +")").val();
        var address = $("td input:eq("+ 0 +")").parent();
        $("td input:eq("+ i +")").remove();
        $(address).html(cellValue);
     }    
  }
});

Answer 1

这是一个示例，我将如何做到这一点:JsFiddle

希望有帮助。

HTML:

<table>
    <tr>
        <td>Content <input type="text" class="hidden"></td>
        <td>Content <input type="text" class="hidden"></td>
    </tr>
    <tr>
        <td>Content <input type="text" class="hidden"></td>
        <td>Content <input type="text" class="hidden"></td>
    </tr>
</table>

CSS:

.visible {
    display: block;
}

.hidden {
    display: none;
}

JS:

var tds = $('td');

tds.click(function(){

    var allInputs = tds.find('input');
    var clickedInpit = $(this).find('input');

    if (allInputs.hasClass('visible')) {

        allInputs.removeClass('visible');
        allInputs.addClass('hidden');
    }

    clickedInpit.addClass('visible');
    clickedInpit.removeClass('hidden');
});