javascript - How to change text into text input element - jQuery - Stack Overflow

admin管理员组

文章数量:1290947

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.

I caught data and made some work already.

Here is the fiddle

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.

I caught data and made some work already.

Here is the fiddle

• javascript
• jquery

Share Improve this question Follow edited Aug 13, 2012 at 12:22 Bill the Lizard 406k212212 gold badges573573 silver badges890890 bronze badges asked Jun 2, 2012 at 12:56 AlfredAlfred 21.4k6363 gold badges174174 silver badges257257 bronze badges 2

• Why a diffferent classname per cell? better have different IDs and the same class – mplungjan Commented Jun 2, 2012 at 13:25
• OMG... I wonder Y -1 for my question!!! – Alfred Commented Jun 2, 2012 at 16:10

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

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));
            }
        });
});

JS Fiddle demo.

---

Edited in response to ments from @mplungjan (below):

.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 just 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));
            }
        });
});

JS Fiddle demo.

References:

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

Here's working jsfiddle with ments explaining stuff:

http://jsfiddle/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');
});

Here is my version - I felt I should post it since I keep having ments on all given suggestions

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

if you give the fields the same class, you can do

$(".field").each(

instead of

$(this).siblings().each(

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.

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);
})

})  

http://jsfiddle/767y4/10/

本文标签： javascriptHow to change text into text input elementjQueryStack Overflow