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的内容与当前内容。

修正：但是我所提供的控制台错误是“$未定义”

jquery的：

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

Answer 1

“未定义$”听起来好像你没有在你的HTML文件中正确包含jQuery。确保HTML文件的head部分中显示以下内容（根据需要调整版本）

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

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

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

Answer 2

使用contenteditable属性

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


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

Example

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

2 个答案: