如何將文本更改爲文本輸入元素 - 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(