从单元格中删除输入元素，并在单元格或其他单元格外部单击时保留值

Remove input element from cell and preserve the value, when clicked outside of cell or another cell

本文关键字：单元格 外部 其他 单击 保留 删除 输入 元素      更新时间：2023-09-26

我希望当我单击单元格外部或另一个单元格时，单元格中的输入元素消失（请注意，单击的单元格之后必须处于活动状态，具有输入元素）。并且单元格必须保持输入元素的值。

单击单元格时，必须显示输入元素（该部分已求解）。

.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);
     }    
  }
});

这是一个示例，我将如何做到这一点： 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');
});
相关文章：