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

时间:2012-06-02 12:56:40

标签: javascript jquery

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

<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 是小提琴

5 个答案:

答案 0 :(得分:5)

我建议如下:

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

参考文献:

答案 1 :(得分:1)

这是工作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');
});

答案 2 :(得分:1)

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

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(

答案 3 :(得分:0)

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

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

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

答案 4 :(得分:0)

更新

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