Question

用户单击一行，然后该函数将获取所选行的productionNumber，然后将其传递给ajax servlet，然后从servlet打印数据。代码完美有效，没有erroRs，但它只能打印第一行，或者它只获得第一行的productionNumber，即使点击后续的行..

如果ID /名称相同，如何点击特定的PRODUCTION数字？

 $(document).ready(function () {

                    $(".production").on("click", (function () {
                var productionNumber1 = document.getElementById("productionNumber").value;
                    console.log(productionNumber1);
                        $.ajax({
                            url: "ViewConsumptionServletJson",
                            type: 'POST',
                            dataType: "json",
                            data: {
                                productionNumber: productionNumber1
                            },
                            success: function (data) {
                                $('#consumptionReportList tbody tr').remove();
                                $('#consumptionReportList').append('<tr><td>' + data[0].productionNumber + '</td><td>' + data[0].dateMade + '</td></tr>');

                            },
                            error: function (XMLHttpRequest, textStatus, exception) {
                                alert(XMLHttpRequest.responseText);
                                console.log("hello");
                            }
                        });
                    }));
                });
                $(document).ready(function () {
                    $('#view').DataTable({
                        "paging": false,
                        "info": false,
                        "dom": '<"pull-left "f>'
                    });
                });




     <tbody>
          <%
                        for (int i = 0; i < cr.size(); i++) {
                    %>
                        <tr class="hoverable" id="clickable" class="production">
                            <td><input type="text" class="input" name="productionNumber" id="productionNumber" value="<%= cr.get(i).getProductionNumber()%>"/></td>
                            <td><%= cr.get(i).getProductID()%></td>
                            <td><%= cr.get(i).getSizeName()%></td>
                            <td><%= cr.get(i).getDateMade()%></td>
                            <td><%= cr.get(i).getPreparedBy()%></td>
                        </tr>
                          <%
                        }
                    %>
                    </tbody>

Answer 1

这里的主要问题是你循环使用相同id的tr标签，这是不正确的，请参阅http://www.w3.org/TR/WCAG20-TECHS/H93.html。

尝试这种方法：

for (int i = 0; i < cr.size(); i++) {
  <tr class="hoverable" id="clickable-<%= i %>" class="production">
    <td><input type="text" class="input" name="productionNumber" id="productionNumber-<%= i %>" value="<%= cr.get(i).getProductionNumber()%>"/></td>
    <td><%= cr.get(i).getProductID()%></td>
    <td><%= cr.get(i).getSizeName()%></td>
    <td><%= cr.get(i).getDateMade()%></td>
    <td><%= cr.get(i).getPreparedBy()%></td>
  </tr>
}

Answer 2

ADD：var productionNumber: = $(this).closest("tr").find(".productionNumber").text();

ADD：<td class="productionNumber"><%= cr.get(i).getProductionNumber()%></td>

工作：

$(document).ready(function () {
                    $(".production").on("click", (function () {
                         var productionNumber: = $(this).closest("tr").find(".productionNumber").text();
                        $.ajax({
                            url: "ViewConsumptionServletJson",
                            type: 'POST',
                            dataType: "json",
                            data: {
                                productionNumber: productionNumber:
                            },
                            success: function (data) {
                                $('#consumptionReportList tbody tr').remove();
                                $('#consumptionReportList').append('<tr><td>' + data[0].productionNumber + '</td><td>' + data[0].dateMade + '</td><td>' + data[0].productionNumber + '</td><td>' + data[0].prepared + '</td></tr>');

                            },
                            error: function (XMLHttpRequest, textStatus, exception) {
                                alert(XMLHttpRequest.responseText);
                            }
                        });
                    }));
                });

    <tbody>
                <%
                    for (int i = 0; i < cr.size(); i++) {
                %>
                <tr class="production">
                    <td class="productionNumber"><%= cr.get(i).getProductionNumber()%></td>
                    <td><%= cr.get(i).getProductID()%></td>
                    <td><%= cr.get(i).getSizeName()%></td>
                    <td><%= cr.get(i).getDateMade()%></td>
                    <td><%= cr.get(i).getPreparedBy()%></td>
                </tr>
                <%
                    }
                %>
            </tbody>

在循环表中单击“获取行”

2 个答案: