将包含文本框的 HTML 表转换为具有文本框值的 HTML 表

Converting HTML Table Containing Textboxes to HTML Table with the Textbox values

本文关键字：HTML 文本 转换 包含      更新时间：2023-09-26

我想知道是否有一种简单的方法可以将文本框作为输入的 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中实现这一目标的方法。

它实际上就像

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

小提琴

你可以做：

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