CODEWITHSUNDEEP
javascriptjquery
some_bloody_fool
some_bloody_fool

Reputation: 4685

Jquery Editable Table: How can i Make certain cells editable?

I am building an editable table in jquery for fun.

Here is my table:

<table id="horiz-min" summary="Indices">
    <thead>
    <tr>
        <th scope="col"></th>
        <th scope="col">ID</th>
        <th scope="col">Description</th>
        <th scope="col"></th>
        <th scope="col"></th>
        <th scope="col"></th>
    </tr>
    </thead>
    <tbody>

        <tr onclick="show();" id="IDOL-FT">
            <td class="editable" id="edit">Edit</td> 
            <td class="edit-field">454</td>  
            <td class="edit-field">TEXTTEXTTEXTTEXT</td>
            <td class="editable">Details</td>
            <td class="editable">Feeds</td>
            <td class="editable">Fields</td>
        </tr>               

    </tbody>
</table>

The first thing i would like to do is to make the ID and Descriptions editable by clicking on edit.

So in JQUERY, i am trying to do this to replace, these td's content with the content that is currently inside of them, in an editable text box.

Fixed: but what i have gives a console error of "$ is not defined"

jquery:

$('td.edit-field').replaceWith('<textbox></textbox>');

Upvotes: 2

Views: 3121

Answers (2)

Joe
Joe

Reputation: 82654

use the contenteditable attribute

<td class="editable" id="edit"  contenteditable="true">Edit</td> 


$('#edit').click(function() {
    $('.editable').attr("contenteditable", "true");
})

Example

Upvotes: 1

JaredPar
JaredPar

Reputation: 755587

The "$ is not defined" sounds like you're not properly including jQuery in your HTML file. Make sure the following appears in the head section of your HTML file (adjust the version as appropriate)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

Additionally since you're using jQuery you should avoid the use of assigning handlers directly in your HTML and instead should use jQuery hookup. For example

$(document).ready(function() {
  $('#IDOL-FT').click(function() {
    show();
  });
});

Upvotes: 1

Related Questions