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

Question

我在下面的页面中有一个表格;

<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> 

表包含这么多行。当我点击最后一个单元格（xx）时，我希望该行中的所有其他文本分别变为<input type="text" />，并分别具有相应的类别及其相应的文本。当用户再次单击xx时，该行可能会更改为更改的文本。

我抓到数据并已经做了一些工作。

Here是

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

JS Fiddle demo。

---

响应编辑到的意见来自@mplungjan（如下图）：

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

JS Fiddle demo。

参考文献：

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

Answer 2

根据你的小提琴，你做几乎一切就OK了，你只需要使用

$col1.html('<input type="text" />'); 

就大功告成了小提琴，该单元格的内容被改变输入字段。

Answer 3

更新时间：

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

}) 

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

Answer 4

这里的工作的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 = $('<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'); 
}); 

Answer 5

这里是我的版本 - 我觉得我应该张贴它，因为我一直有意见上的所有给出的建议

DEMO

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

如果你给字段相同的类，你可以做

$(".field").each(

，而不是

$(this).siblings().each(