CODEWITHSUNDEEP
jqueryhtml-table
slandau
slandau

Reputation: 24062

Convert table cells to text-boxes with JQuery

I have a table, shown below:

<table id="paramsTable">
    <tbody>
        <tr>
            <th>Name</th>
            <th>Value&nbsp;<span style="color: Blue; cursor: pointer; font-size: smaller;" id="editParamValues">Edit</span></th>
            <th>Type</th>
        </tr>
        <tr>
            <td style="display: none;">1372</td>
            <td>providername</td>
            <td>BloombergFTP</td>
            <td>String</td>
        </tr>
        <tr>
            <td style="display: none;">1373</td>
            <td>RateSetList</td>
            <td>1020</td>
            <td>String</td>
        </tr>
        <tr>
            <td style="display: none;">1374</td>            
            <td>BloombergServer</td>
            <td>CFC105</td>
            <td>String</td>
        </tr>
    </tbody>
</table>

So now, that nifty little span, I have bound to this click event:

$('#editParamValues').live('click', function () {
      alert('true');
});

Getting the alert, it works fine. However, I don't want to alert, I want that binded method to change all of the cells that are in the value column to become textboxes filled with whatever their value is, so the user can edit them.

How would I do this?

Upvotes: 6

Views: 14170

Answers (2)

Thomas Shields
Thomas Shields

Reputation: 8943

You don't even need Javascript/jQuery:

    <table>
        <tr>
            <td><input type="text" value="My Thing"></td>
        </tr>
    </table>
input {
 border:none;

}
input:active {
    border:1px solid #000;
}

...just use CSS to style the input to look like a span.

Upvotes: 3

Sjoerd
Sjoerd

Reputation: 75629

$('#editParamValues').click(function () {
    $('tr td:nth-child(3)').each(function () {
        var html = $(this).html();
        var input = $('<input type="text" />');
        input.val(html);
        $(this).html(input);
    });
});

Upvotes: 15

Related Questions