Question

我有一个包含4行和4列的表格。我还有一个叫做编辑的按钮。现在，当我点击该按钮时，我希望将表格的最后两列更改为具有这些列值的文本框，最后保存按钮以保存它们。

我没有任何个人识字标识，因此在将其更改为文本框时会遇到一些问题。

Answer 1

在html5中，有一项称为内容可编辑的功能。

只需在html元素中添加一个属性

，就可以编辑一个html元素

以td元素为例，如果要使其可编辑，只需在td元素中添加一个“contenteditable”属性

<td contenteditable>Some String</td>

在jQuery中，你可以像这样添加contenteditable属性

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

在使其满足后，您必须单击html元素，它将显示为可编辑的html元素。

希望这有用。

Answer 2

在jquery中使用 .replaceWith() 使用提供的新内容替换匹配元素集中的每个元素，并返回已删除的元素集。

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

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

注意切片：使用负数从数组末尾中选择

DEMO

Answer 3

您必须使用nth-child Selector获取所需的td元素

看这里：

<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>

你可以按照方式获得最后2 td

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

小提琴：

Fiddle

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

3 个答案:

DEMO