javascript - Jquery 可编辑表 : How can i Make certain cells editable?

Question

为了好玩，我正在用 jquery 构建一个可编辑的表格。

这是我的表格:

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

我要做的第一件事是通过单击编辑使 ID 和描述可编辑。

所以在 JQUERY 中，我试图这样做，以将这些 td 的内容替换为当前在其中的内容，在一个可编辑的文本框中。

已修复:但我给出的控制台错误是“$ is not defined”

j查询:

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

Answer 1

“$ is not defined”听起来像是您没有在 HTML 文件中正确包含 jQuery。确保以下内容出现在您的 HTML 文件的头部(适当调整版本)

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

此外，由于您使用的是 jQuery，因此应避免在 HTML 中直接使用分配处理程序，而应使用 jQuery 连接。例如

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