Question

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>');

Answer 1

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();
  });
});