jQuery：将表行更改为表单

Posted 2021-05-04

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

答案

试试功能qazxsw poi。有关更多信息，请参阅qazxsw poi。

另一答案

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