Question

我想知道是否有一种简单的方法可以将带有文本框作为输入的html表转换为带有文本框值的新表。

例如：

我有这个表，用户可以在其中插入数据。

<table>
   <tr>
      <td>
          <input id="name" type="text"/>
      </td>
      <td>
          <input id="phone" type="text"/>
      </td>
      <td>
          <input id="email" type="text"/>
      </td>
   </tr>
</table>

然后，用户在名称框中输入“john”，在电话框中输入“（987）891-9819”，在电子邮箱中输入“john@email.com”。

我希望我的结果表看起来像这样：

<table>
   <tr>
      <td>
          john
      </td>
      <td>
          (987)891-8919
      </td>
      <td>
          john@email.com
      </td>
   </tr>
</table>

我正在寻找一种在javascript / jquery中实现此目的的方法。

Answer 1

实际上就像

一样简单

$('input').replaceWith(function() {
    return this.value;
});

FIDDLE

Answer 2

你可以这样做：

function convertTable() {
    $("table tr td :input:text").each(function() {
        var value = this.value;
        $(this).parent("td").empty().text(value);
    });
}

使用文本框值将包含文本框的HTML表转换为HTML表

2 个答案: