18910140161

JavaScript-如何使用node.js从html表中检索选定的行-Stack Overflow

顺晟科技

2022-10-19 11:56:36

152

我正在使用express和Node.js创建一个web应用程序。我有一个表,它是用来自数据库的数据使用ejs生成的。下面是创建表的代码:

<form action="/user-orders" method="POST">
                        <table id="order-history">
                            <thead>
                                <tr>
                                    <th>Date of Order</th>
                                    <th>Order ID</th>
                                    <th>Order Total</th>
                                    <th>Order Status</th>
                                    <th>Tracking Info</th>
                                    <th>Order Details</th>
                                </tr>
                            </thead>
                            <tbody>
                                <% orders.forEach(function(order){ %>
                                <tr>
                                    <td name="date"><%= order.date%></td>>
                                    <td name="id"><%= order.id%></td>
                                    <td name="cost"> &dollar;<%= order.cost.toFixed(2) %></td>
                                    <td name="status"><%= order.status%></td>
                                    </td>
                                    <td><input type="submit" class="profile-edit-btn"
                                            style="color:#0062cc; background:rgb(29, 29, 29); width:100%"
                                            name="viewTracking" value="View" id="viewTracking">
                                    </td>
                                    </td>
                                    <td><input type="submit" class="profile-edit-btn"
                                            style="color:#0062cc; background:rgb(29, 29, 29); width:100%"
                                            name="viewOrder" value="View" id="viewOrder">
                                    </td>
                                </tr>
                                <% }) %>
                            </tbody>
                        </table>
                    </form>

显示以下内容:

我想知道的是,当我单击其中一个按钮时,如何从选定的行中获取值。

即:单击第1行中的视图将返回:

<form action="/user-orders" method="POST">
                        <table id="order-history">
                            <thead>
                                <tr>
                                    <th>Date of Order</th>
                                    <th>Order ID</th>
                                    <th>Order Total</th>
                                    <th>Order Status</th>
                                    <th>Tracking Info</th>
                                    <th>Order Details</th>
                                </tr>
                            </thead>
                            <tbody>
                                <% orders.forEach(function(order){ %>
                                <tr>
                                    <td name="date"><%= order.date%></td>>
                                    <td name="id"><%= order.id%></td>
                                    <td name="cost"> &dollar;<%= order.cost.toFixed(2) %></td>
                                    <td name="status"><%= order.status%></td>
                                    </td>
                                    <td><input type="submit" class="profile-edit-btn"
                                            style="color:#0062cc; background:rgb(29, 29, 29); width:100%"
                                            name="viewTracking" value="View" id="viewTracking">
                                    </td>
                                    </td>
                                    <td><input type="submit" class="profile-edit-btn"
                                            style="color:#0062cc; background:rgb(29, 29, 29); width:100%"
                                            name="viewOrder" value="View" id="viewOrder">
                                    </td>
                                </tr>
                                <% }) %>
                            </tbody>
                        </table>
                    </form>

我尝试了下面的两个代码片段,但它们都返回未定义:

<form action="/user-orders" method="POST">
                        <table id="order-history">
                            <thead>
                                <tr>
                                    <th>Date of Order</th>
                                    <th>Order ID</th>
                                    <th>Order Total</th>
                                    <th>Order Status</th>
                                    <th>Tracking Info</th>
                                    <th>Order Details</th>
                                </tr>
                            </thead>
                            <tbody>
                                <% orders.forEach(function(order){ %>
                                <tr>
                                    <td name="date"><%= order.date%></td>>
                                    <td name="id"><%= order.id%></td>
                                    <td name="cost"> &dollar;<%= order.cost.toFixed(2) %></td>
                                    <td name="status"><%= order.status%></td>
                                    </td>
                                    <td><input type="submit" class="profile-edit-btn"
                                            style="color:#0062cc; background:rgb(29, 29, 29); width:100%"
                                            name="viewTracking" value="View" id="viewTracking">
                                    </td>
                                    </td>
                                    <td><input type="submit" class="profile-edit-btn"
                                            style="color:#0062cc; background:rgb(29, 29, 29); width:100%"
                                            name="viewOrder" value="View" id="viewOrder">
                                    </td>
                                </tr>
                                <% }) %>
                            </tbody>
                        </table>
                    </form>

顺晟科技:

由于整个文件只包含一个,所以无论单击哪个提交按钮,所有行的内容都将提交到,并且字段名将重复,正如前面指出的那样。

最好每行有一个,然后只提交该行的内容。

注意,HTML表单将以urlencoded格式提交数据,如

<form action="/user-orders" method="POST">
                        <table id="order-history">
                            <thead>
                                <tr>
                                    <th>Date of Order</th>
                                    <th>Order ID</th>
                                    <th>Order Total</th>
                                    <th>Order Status</th>
                                    <th>Tracking Info</th>
                                    <th>Order Details</th>
                                </tr>
                            </thead>
                            <tbody>
                                <% orders.forEach(function(order){ %>
                                <tr>
                                    <td name="date"><%= order.date%></td>>
                                    <td name="id"><%= order.id%></td>
                                    <td name="cost"> &dollar;<%= order.cost.toFixed(2) %></td>
                                    <td name="status"><%= order.status%></td>
                                    </td>
                                    <td><input type="submit" class="profile-edit-btn"
                                            style="color:#0062cc; background:rgb(29, 29, 29); width:100%"
                                            name="viewTracking" value="View" id="viewTracking">
                                    </td>
                                    </td>
                                    <td><input type="submit" class="profile-edit-btn"
                                            style="color:#0062cc; background:rgb(29, 29, 29); width:100%"
                                            name="viewOrder" value="View" id="viewOrder">
                                    </td>
                                </tr>
                                <% }) %>
                            </tbody>
                        </table>
                    </form>

能否解析此格式?

  • TAG:
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航