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

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

1 个答案: