javascript - 获取动态构造的 html 表中的行值

Question

我正在使用复选框在 servlet 内构建一个动态表，并给出了该复选框的 id，现在我尝试在单击按钮时获取选定的复选框行值，但如果我选择了该复选框，则会得到错误的值对于第四行值意味着显示第二行值的警报，下面我给出了我的 servlet 和 jquery 代码， 查看输出图像，我选择了 260 数字行，但警报显示 257 这是我的问题。 Servlet 代码，

PrintWriter out = response.getWriter();
        PreparedStatement distscenarioName = null;
        PreparedStatement minscenariId = null;
        PreparedStatement testcaseName = null;
        String scenari_name = null; 
        Connection connection=DatabaseConnection.getConnection();
        distscenarioName=connection.prepareStatement("select distinct scenario_name from scenario");
        ResultSet rs=distscenarioName.executeQuery();
        out.println("<tr><td><b>");
        out.println("Scenario Name:");
        out.println("</b></td><td><b>");
        out.println("Testcase ID:");
        out.println("</b></td><td><b>");
        out.println("Testcase Name:");
        out.println("</b></td><td><b>");
        out.println("Testcase Description:");
        out.println("</b></td><td><b>");
        out.println("Action:");
        out.println("</b></td></tr>");
        int i=0;
        while(rs.next()){
            scenari_name=rs.getString("scenario_name");
            minscenariId=connection.prepareStatement("select min(scenario_id) from scenario where scenario_name =?");
            minscenariId.setString(1, scenari_name);
            ResultSet rss=minscenariId.executeQuery();              
            if(rss.next()){
                testcaseName=connection.prepareStatement("select tc_id,tc_desc,tc_name from testcase where scenario_id=?");
                testcaseName.setInt(1,rss.getInt("min(scenario_id)"));
                ResultSet testcaseExe=testcaseName.executeQuery();  
                out.println("<tr><td><h4>");
                out.println(scenari_name);
                out.println("</td></h4><td></td><td></td><td></td><td><input type=checkbox class='btnChckBox'></td></tr>");                 
                while(testcaseExe.next()){                      
                    out.println("<tr><td>");
                    out.println("<td id='testCaseId"+i+"'>");
                    out.println(testcaseExe.getInt(1));
                    out.println("</td>");
                    out.println("</td><td id='testCaseName"+i+"'>");
                    out.println(testcaseExe.getString("tc_name"));
                    out.println("</td><td>");
                    out.println(testcaseExe.getString("tc_desc"));
                    out.println("</td><td>");
                    out.println("<input type=checkbox class='btnChckBox' id='action"+i+"'>");
                    out.println("</td></tr>");
                    i++;
                }

                //out.println("<input type='hidden' id='gridSize' value='"+i+"'>");

            }
        }

我的jquery代码是

$('#StartExec').click(function() {
                     $('#testcaseTable tr').each(function(i) {
                            var tcID = this.cells[1].innerHTML;
                            var tcName = this.cells[2].innerHTML;
                            var cellvalues = this.cells[4].innerHTML;
                            if($('#action'+i).prop('checked')){
                                 alert('Inside if tc ID::::::::'+tcID);
                                    alert('inside if tc name::::::'+tcName);
                            }

                        });
                });

Answer 1

请设置 tr 的 id 和复选框，例如:

参见**行:

while(testcaseExe.next()){    

                    **out.println("<tr id="+testcaseExe.getInt(1)+"><td>");**

                    out.println("<td id='testCaseId"+i+"'>");
                    out.println(testcaseExe.getInt(1));
                    out.println("</td>");
                    out.println("</td><td id='testCaseName"+i+"'>");
                    out.println(testcaseExe.getString("tc_name"));
                    out.println("</td><td>");
                    out.println(testcaseExe.getString("tc_desc"));
                    out.println("</td><td>");
                    **out.println("<input type=checkbox class='btnChckBox' id='action"+testcaseExe.getInt(1)+"'>");**
                    out.println("</td></tr>");
                    i++;
                }

你的jquery代码是

$('#StartExec').click(function() {
                     $('#testcaseTable tr').each(function(i) {
                               if($('#action'+this.id).prop('checked')){
                                 alert('Inside if tc ID::::::::'+tcID);
                                    alert('inside if tc name::::::'+tcName);
                            }

                        });
                });