jQuery：将表格行更改为表单答案

【问题标题】：jQuery: change a table row into a formjQuery：将表格行更改为表单
【发布时间】：2011-10-02 15:55:01
【问题描述】：

在 jQuery 中将特定表格行更改为表单的最佳方法是什么？

例如改变：

<table>
    <tr><td><a href="edit me">edit</a></td><td>first row</td></tr>
    <tr><td><a href="edit me">edit</a></td><td>some row</td></tr>
    <tr><td><a href="edit me">edit</a></td><td>last row</td></tr>
</table>

进入：

<table>
    <tr><td><a href="edit me">edit</a></td><td>first row</td></tr>
    <tr>
        <form>
            <td><a href="edit me">edit</a></td>
            <td><input type='text' name='a' value='b'/></td>
        </form>
    </tr>
    <tr><td><a href="edit me">edit</a></td><td>last row</td></tr>
</table>

更新：我们最终使用的 html ：

<form>
    <table>
        <tr>
            <td><img class="editRow"></td>
            <td class="field">field to know</td>
        </tr>
    </table>
</form>

和 jQuery 代码：

$( ".editRow" ).click( function() {
    var rowToEdit = $(this).parent().parent();
    var field = rowToEdit.children(".field")
    rowToEdit = .replaceWith( "<td></td>\
        <td>\
            <input type='hidden' value='"+field+"'>\
        </td>"
});

【问题讨论】：

您正试图使 HTML 无效。不要那样做，浏览器会以各种不同和不需要的方式进行错误恢复。
你需要插件还是你想自己做？
Sandeep Manne：我可以使用 jquery-1.5.1.min.js，jquery.ui.core ui.widget ui.mouse ui.button ui.draggable ui.position ui.resizable ui.dialog
Quentin：这个 html 只是一个例子。我的问题更笼统：jQuery 中将特定表行更改为表单的最佳方法是什么

标签： javascript jquery forms html-table

【解决方案1】：

试试.wrap()函数。如需更多信息，请参阅here。

【讨论】：

【解决方案2】：

有一个 jquery 函数可以完全满足您的要求，基本上它允许您创建一个表格，然后每个单元格都是可编辑的，因此您不必使用谷歌搜索一下。你会找到的

【讨论】：