Jquery可编辑表格:如何使某些单元格可编辑

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

本文关键字：编辑 单元格 何使某 表格 Jquery      更新时间：2023-09-26

为了好玩，我正在用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"

jquery: 

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

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

使用 contentitable 属性

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

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

相关文章：