CODEWITHSUNDEEP
javascriptjqueryhtml
user3788671
user3788671

Reputation: 2057

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

I was wondering if there is an easy way to convert an html table that has textboxes as inputs into new table with the textbox values.

For example:

I have this table in which a user can insert data.

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

The user then inserts "john" into the name box, "(987)891-9819" into the phone box, and "[email protected]" into the email box.

I want my result table to look like this:

<table>
   <tr>
      <td>
          john
      </td>
      <td>
          (987)891-8919
      </td>
      <td>
          [email protected]
      </td>
   </tr>
</table>

I am looking for a way to accomplish this in javascript / jquery.

Upvotes: 0

Views: 101

Answers (2)

adeneo
adeneo

Reputation: 318302

It's actually as easy as

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

FIDDLE

Upvotes: 2

tymeJV
tymeJV

Reputation: 104785

You can do:

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

Upvotes: 1

Related Questions