如何将文本更改为文本输入元素 – jQuery

我的页面中有一张表格如下;

 
 
field1x
 
field2x
 
field3x
 
field4x
 
#
 
  

该表包含很多行 。 当我单击最后一个单元格（xx）时，我希望该行中的所有其他文本分别更改为具有相应类的 ，其中包含相应的文本。 当用户再次单击xx ，可以使用更改的文本更新行。

我抓住了数据并做了一些工作。

这是小提琴

Answer 1

我建议如下：

 $('#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($('',{'value' : t}).val(t)); } }); }); 

JS小提琴演示 。

---

编辑回应@mplungjan的评论（下）：

在任何情况下， .text("").append(something) .text(something)必须比.text("").append(something)更快更简单。 你不是在添加文本而是添加html，所以更有理由使用html() 。

当然，他是对的。 因此：

 $('#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($('',{'value' : t}).val(t)); } }); }); 

JS小提琴演示 。

参考文献：

• append() 。
• each() 。
• find() 。
• siblings() 。
• text() 。
• val() 。

Answer 2

这是工作jsfiddle与评论解释的东西：

http://jsfiddle.net/767y4/6/

 $('#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 = $(''); // 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 = $(''); // 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'); }); 

Answer 3

这是我的版本 – 我觉得我应该发布它，因为我一直在评论所有给定的建议

DEMO

 $('#tbl .xx').toggle( function() { $(this).siblings().each(function(){ var t = $(this).text(); $(this).html($('',{'value' : t})); }); }, function() { $(this).siblings().each(function(){ var inp = $(this).find('input'); if (inp.length){ $(this).text(inp.val()); } }); } ); 

如果你给字段提供相同的类，你可以这样做

$(".field").each(

代替

$(this).siblings().each(

Answer 4

根据你的小提琴，你做的几乎一切都好，你只需要使用

 $col1.html(''); 

并且您已完成，单元格的内容将更改为输入字段。

Answer 5

更新：

 $('#tbl').on('click','.xx',function() { $('td').not(':last').each(function(){ var val = $(this).text() $(this).text('').append("") }) }); $('td:last').click(function() { $(this).toggleClass('xx'); }) $('td:last').on("click", function(){ $('input').each(function(){ var tex = $(this).val(); $(this).replaceWith(tex); }) }) 

http://jsfiddle.net/767y4/10/