如何将文本更改为文本输入元素-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 ，该行可能会使用更改后的文本进行更新。

我已捕获数据并已进行一些工作。

这是小提琴

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小提琴演示 。

---

根据@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小提琴演示 。

参考文献：

• 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 = $('<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 3

这是我的版本-由于我对所有给定的建议一直发表评论，因此我认为应该发布该版本

演示

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

Answer 4

根据您的小提琴，您几乎做了一切正常，只需要使用

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

完成后，单元格的内容将更改为输入字段。

Answer 5

更新：

$('#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/