Question

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

Answer 1

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 comments 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().