javascript 如何将文本更改为文本输入元素 - jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10862476/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change text into text input element - jQuery
提问by blasteralfred Ψ
I have a table in my page as below;
我的页面中有一张表格，如下所示；
<table id="tbl" cellpadding="0" cellspacing="0" style="width: 100%">
<tr>
<td class="field1s">field1x</td>
<td class="field2s">field2x</td>
<td class="field3s">field3x</td>
<td class="field4s">field4x</td>
<td class="xx">#</td>
</tr>
</table>
The table contains so many rows. When I click last cell (xx), I want all other texts in the row change to <input type="text" />having corresponding classes respectively, with their corresponding texts inside. And when user again click xx, the row may be updated with changed text.
该表包含这么多行。当我单击最后一个单元格 (xx) 时，我希望该行中的所有其他文本<input type="text" />分别更改为具有相应的类，并在其中包含相应的文本。并且当用户再次单击 时xx，该行可能会使用更改的文本进行更新。
I caught data and made some work already.
我捕获了数据并已经做了一些工作。
Hereis the fiddle
这是小提琴
回答by David says reinstate Monica
I'd suggest the following:
我建议如下：
$('#tbl').on('click','.xx',function() {
$(this).siblings().each(
function(){
// if the td elements contain any input tag
if ($(this).find('input').length){
// sets the text content of the tag equal to the value of the input
$(this).text($(this).find('input').val());
}
else {
// removes the text, appends an input and sets the value to the text-value
var t = $(this).text();
$(this).html($('<input />',{'value' : t}).val(t));
}
});
});
Editedin response to comments from @mplungjan(below):
编辑响应意见从@mplungjan（如下图）：
.text(something)must surely be faster and simpler to read than.text("").append(something)in any case. And you are not adding text but html so even more reason to use justhtml().
.text(something)肯定比.text("").append(something)任何情况下都更快更容易阅读。而且您添加的不是文本而是 html，因此更有理由仅使用html().
He's right, of course. Therefore:
他是对的，当然。所以：
$('#tbl').on('click','.xx',function() {
$(this).siblings().each(
function(){
if ($(this).find('input').length){
$(this).text($(this).find('input').val());
}
else {
var t = $(this).text();
$(this).html($('<input />',{'value' : t}).val(t));
}
});
});
References:
参考：
回答by mplungjan
Here is my version - I felt I should post it since I keep having comments on all given suggestions
这是我的版本 - 我觉得我应该发布它，因为我一直对所有给定的建议发表评论
$('#tbl .xx').toggle(
function() {
$(this).siblings().each(function(){
var t = $(this).text();
$(this).html($('<input />',{'value' : t}));
});
},
function() {
$(this).siblings().each(function(){
var inp = $(this).find('input');
if (inp.length){
$(this).text(inp.val());
}
});
}
);
if you give the fields the same class, you can do
如果你给字段相同的类，你可以做
$(".field").each(
$(".field").each(
instead of
代替
$(this).siblings().each(
$(this).siblings().each(
回答by Kane Cohen
Here's working jsfiddle with comments explaining stuff:
这是 jsfiddle 的工作，其中包含解释内容的注释：
$('#tbl').on('click','.xx',function() {
// active, means we were in input mode - revert input to td
if ($(this).hasClass('active')) {
// go through each input in the table
$('#tbl input').each(function() {
// get input text
var colData = $(this).val();
// get input class
var colClass = $(this).attr('class');
// create td element
var col = $('<td></td>');
// fill it with data
col.addClass(colClass).text(colData);
// now. replace
$(this).replaceWith(col);
});
} else {
// go through each column in the table
$('#tbl td:not(.xx)').each(function() {
// get column text
var colData = $(this).text();
// get column class
var colClass = $(this).attr('class');
// create input element
var input = $('<input />');
// fill it with data
input.addClass(colClass).val(colData);
// now. replace
$(this).replaceWith(input);
});
}
// give link class active to detect if we are in input mode
$(this).toggleClass('active');
});
回答by MaxArt
According to your fiddle, you did almost everything ok, you just need to use
根据你的小提琴，你几乎一切都好，你只需要使用
$col1.html('<input type="text" />');
and you're done, the content of the cells is changed to input fields.
大功告成，单元格的内容将更改为输入字段。
回答by undefined
Updated:
更新：
$('#tbl').on('click','.xx',function() {
$('td').not(':last').each(function(){
var val = $(this).text()
$(this).text('').append("<input type='text' value=" + val + ">")
})
});
$('td:last').click(function() {
$(this).toggleClass('xx');
})
$('td:last').on("click", function(){
$('input').each(function(){
var tex = $(this).val();
$(this).replaceWith(tex);
})
})
