表单 <td> 为 post 方法获取数据

Question

是否可以像使用输入一样从 html table 中的 td 获取数据？

<form action="/user/editUser" method="post">
    <tr>
        <td>
            <button type="submit" class="btn btn-primary">Edit</button>
        </td>
        <td name="firstName"><%= user.firstName %></td>
        <td name="lastName"><%= user.lastName %></td>

    </tr>
</form>

Answer 1

我假设“就像您使用输入一样”指的是输入的 .value 属性，而您感兴趣的数据是 user.firstName 和user.lastName 在你的 HTML 被模板化之后？如果是，则 <td> 没有 .value 属性.

相反，您可以分别使用 .innerHTML 和 .innerText 属性访问 HTML 或 td（或任何标签）的内部文本。

Answer 2

表格不是表单元素，因此在提交表单时会忽略它们。您可以使用 Javascript 做的一件事是覆盖表单的提交事件并对您的操作执行 Ajax post。首先在表单中添加一个 id。（<表单 id="我的表单" ...>）。我还会为此添加错误处理。

样本

<script>
    $('#myForm').submit(function (e) {
        e.preventDefault();
        var firstName = $('td[name="firstName"]').html();
        var lastName = $('td[name="lastName"]').html();

        $.ajax({
            method: 'POST',
            url: '/user/editUser',
            data: {
                firstName,
                lastName,
            },
            success: (res) => {
                // do something
                console.log(res);
            }
        });
    });
</script>

表单 <td> 为 post 方法获取数据

Form <td> get data for post method

html

html-table

node.js

样本