当我单击单元格外部或另一个单元格时,我希望单元格中的输入元素消失(请注意,单击的单元格随后必须处于事件状态,具有输入元素)。 并且单元格必须保留输入元素的值。
单击单元格时,必须出现输入元素(该部分已解决)。
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');
});
关于javascript - 当在单元格或另一个单元格外部单击时,从单元格中删除输入元素并保留值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30822190/