Question

我正在尝试从快速js中的表中选择行。

这是我在ejs视图文件中的html + ejs表代码。我试图只获取选中复选框的行。

                  <table class="table">
                    <thread class = "thread-inverse">
                      <tr>
                        <th>Item Id</th>
                        <th>Name</th>
                        <th>Category</th>
                        <th>Manufacturer</th>
                        <th>Supplier</th>
                        <th>Buying Price</th>
                        <th>Selling Price</th>
                        <th>Action</th>
                      </tr>
                      <% for(var i =0; i < itemList.length; i++){%>
                        <tr>
                          <td><%= itemList[i].productId %></td>
                          <td><%= itemList[i].itemName %></td>
                          <td><%= itemList[i].category %></td>
                          <td><%= itemList[i].manufacturer %></td>
                          <td><%= itemList[i].supplier %></td>
                          <td><%= itemList[i].buyingPrice %></td>
                          <td><%= itemList[i].sellingPrice %></td>
                          <td><input type="text" name="quantity""></td>
                          <td><input type="checkbox" name="productId" value="<%= itemList[i].productId %>"> | ADD </td>
                        </tr>

                      <% } %>
                    </thread>
                  </table>

我尝试了几件事，但没有任何工作...... 有人可以给我一个解决方案吗？

Answer 1

稍微修改你的代码，

//HTML
//add a **onclick** listener on checkbox

<td><input type="checkbox" class="checkbox" name="productId" value="<%= itemList[i].productId %>"> | ADD </td>


//In java script file

$('.checkbox').click(function() {
  var productId  = $(this).closest("tr").find('td:eq(0)').text();
  //changing td:eq(x) will give you corresponding clicked row's cell

}

Answer 2

我尝试了以下方法，效果很好。

通过添加类名来修改代码片段：

    <% for(var i =0; i < itemList.length; i++){%>
        <tr class="tbl-item">
...
    <% } %>

并实现点击功能：

$(".checkbox").each(function(index) {
        $(this).click(function(e) {
            let item = $(".tbl-item")[index];
            console.log(item);
        }) ;
    })

然后控制台将显示所需的标签数据，您可以获取每个项目，例如： item.children[4].innerText

谢谢。

Express.js - 从ejs中的表中获取所选项目行

2 个答案: