单击按钮时如何将表中的某些td转换为文本框

Question

I have a table with 4 rows and 4 column. Also I have a button called edit. Now when I click on that button, I want the last two columns of the table to be changed into textboxes with values of those columns and finally a save button to save them.

I do not have any identification for individual tds so facing a little problem in changing them into textboxes.

Answer 1

In html5 there is a feature that is called content editable.

you can make one html element editable with just adding one attribute to the html element

take an example of td element, if you want to make it editable, just add one "contenteditable" attribute to the td element

<td contenteditable>Some String</td>

in jQuery you can add the contenteditable attribute like this

$("td#target").attr("contenteditable", "");

After making it contenteditable you have to click on the html element, it will appear as an editable html element.

Hope this is helpful.

Answer 2

use .replaceWith() in jquery Replace each element in the set of matched elements with the provided new content and return the set of elements that was removed.

$('tr td').slice(-2).each(function(){

  $(this).replaceWith( $("<input/>",{value:$(this).text(),type:"text"}) );
   //OR
    // $(this).replaceWith( '<input type="text" value="'+$(this).text()+'">');
});

note in slice :Use negative numbers to select from the end of an array

DEMO

Answer 3

You have To use nth-child Selector to Get the required td element

Look Here:

<table>
<tr><td>John</td><td>John</td><td>John</td><td>John</td></tr>
<tr><td>Karl</td><td>John</td><td>John</td><td>John</td></tr>
<tr><td>Brandon</td><td>John</td><td>John</td><td>John</td></tr>
<tr><td>Benjamin</td><td>John</td><td>John</td><td>John</td></tr>
</table>

You Can Get Last 2 td Following Way

 $( "tr td:nth-child(3)" ).html( "<input />" );
 $( "tr td:nth-child(4)" ).html( "<input />" );

Fiddle:

Fiddle