Question

正在处理我需要使用数据库显示动态表的项目。能够显示表但是将值传递到另一个页面进行编辑表时遇到问题。我只能通过表的第一行。我使用javascript传递价值。请帮我。这是我到现在为止所尝试的

<table id='tbl2' border="2">
       <thead>
        <tr style="font-weight: bold;"><td colspan="7" align="center" >Team Shift Roster</td></tr>
        <tr style="font-weight: bold;"><td>Date/Shift</td> <td>06:00AM - 02:00PM</td> <td>02:00PM - 10:00PM</td> <td>10:00PM - 06:00AM</td> <td width="130px">Weekly Off</td> <td width="130px">General Shift</td> <td></td></tr>
         </thead>
         <tbody>

            <%
          if(rs != null){ 
            while(rs.next()){
                %>
             <tr>
                <td style="font-weight: bold;" >
                   <input style="border:0px; width:100px" name="dd" id="dd" value="<%=rs.getString(1)%>" readonly /></td>
                <td><input style="border:0px; width:130px" type="text"  value="<%=rs.getString(2)%>" name="one" id="one"/></td>
                <td><input style="border:0px; width:130px" type="text"  value="<%=rs.getString(3)%>" name="two" id="two"/></td>
                <td><input style="border:0px; width:130px" type="text"  value="<%=rs.getString(4)%>" name="thr" id="thr"/></td>
                <td><input style="border:0px; width:90px" type="text"  value="<%=rs.getString(5)%>" name="fr" id="fr"/></td>
                <td><input style="border:0px; width:100px" type="text"  value="<%=rs.getString(6)%>" name="fve" id="fve"/></td>
                <td><input style="border:0px; width:90px" type="button" onclick="myFun()" value="Update"></td>
                </tr>

         <%     } }
              else { out.println("No Record Found"); }   %>
         </tbody>
    </table>

这是我的Jscript函数

<script>
    function myFun(){
      var v1 = document.getElementById("one").value; 
      var v2 = document.getElementById("two").value; 
      var v3 = document.getElementById("thr").value; 
      var v4 = document.getElementById("fr").value; 
      var v5 = document.getElementById("fve").value; 
      var dd = document.getElementById("dd").value; 
      window.location.href='DCM_UsrShiftUpdt.jsp?v1='+v1+'&v2='+v2+'&v3='+v3+'&v4='+v4+'&v5='+v5+'&dd='+dd;

}
</script>

请回复。提前谢谢。

Answer 1

您的代码问题是重复的ID，使用动态ID，让我们采用行ID：

if(rs != null){
    int rowId = 1;
    while(rs.next()){ %>
   <tr>
       <td style="font-weight: bold;"><input style="border:0px; width:100px" name="dd" id="dd<%=rowId%>" value="<%=rs.getString(1)%>" readonly /></td>
       <td><input style="border:0px; width:130px" type="text"  value="<%=rs.getString(2)%>" name="one" id="one<%=rowId%>"/></td>
        .... so on for other <td>
       <td><input style="border:0px; width:90px" type="button" onclick="myFun(<%=rowId%>)" value="Update"></td>
  </tr>
<%
rowId++;
  }
}

JS

function myFun(rowId){
    var v1 = document.getElementById("one"+rowId).value; 
    //so on for the rest
}

P.S。避免使用JSP scriptlet并改为使用JSTL。

Answer 2

ID必须是唯一的。使用parentNode的兄弟节点来收集按钮所在行的输入值

＆＃13;

var buts = document.querySelectorAll("[value=Update]");
for (var i=0;i<buts.length;i++) {
  buts[i].onclick=function() {
    var cells = this.parentNode.parentNode.cells, parms = [];
    for (var i=0;i<cells.length-1;i++) { // stop at the button
      var input = cells[i].querySelector("input");
      parms.push(input.name+"="+input.value)
    }
    console.log(parms.join("&"));
  }
}

＆＃13;

<table id='tbl2' border="2">
       <thead>
        <tr style="font-weight: bold;"><td colspan="7" align="center" >Team Shift Roster</td></tr>
        <tr style="font-weight: bold;"><td>Date/Shift</td> <td>06:00AM - 02:00PM</td> <td>02:00PM - 10:00PM</td> <td>10:00PM - 06:00AM</td> <td width="130px">Weekly Off</td> <td width="130px">General Shift</td> <td></td></tr>
         </thead>
         <tbody>
             <tr>
                <td style="font-weight: bold;" >
                    <input style="border:0px; width:100px" name="dd" value="1" readonly /></td>
                <td><input style="border:0px; width:130px" type="text"  value="1" name="one"/></td>
                <td><input style="border:0px; width:130px" type="text"  value="2" name="two" /></td>
                <td><input style="border:0px; width:130px" type="text"  value="3" name="thr" /></td>
                <td><input style="border:0px; width:90px" type="text"  value="4" name="fr" /></td>
                <td><input style="border:0px; width:100px" type="text"  value="5" name="fve" /></td>
                <td><input style="border:0px; width:90px" type="button" value="Update"></td>
                </tr>
             <tr>
                <td style="font-weight: bold;" >
                    <input style="border:0px; width:100px" name="dd" value="1" readonly /></td>
                <td><input style="border:0px; width:130px" type="text"  value="1" name="one"/></td>
                <td><input style="border:0px; width:130px" type="text"  value="2" name="two" /></td>
                <td><input style="border:0px; width:130px" type="text"  value="3" name="thr" /></td>
                <td><input style="border:0px; width:90px" type="text"  value="4" name="fr" /></td>
                <td><input style="border:0px; width:100px" type="text"  value="5" name="fve" /></td>
                <td><input style="border:0px; width:90px" type="button" value="Update"></td>
                </tr>
             <tr>
                <td style="font-weight: bold;" >
                    <input style="border:0px; width:100px" name="dd" value="1" readonly /></td>
                <td><input style="border:0px; width:130px" type="text"  value="1" name="one"/></td>
                <td><input style="border:0px; width:130px" type="text"  value="2" name="two" /></td>
                <td><input style="border:0px; width:130px" type="text"  value="3" name="thr" /></td>
                <td><input style="border:0px; width:90px" type="text"  value="4" name="fr" /></td>
                <td><input style="border:0px; width:100px" type="text"  value="5" name="fve" /></td>
                <td><input style="border:0px; width:90px" type="button" value="Update"></td>
                </tr>

         </tbody>
    </table>

＆＃13;

使用javascript将值传递给动态表中的另一个jsp

2 个答案: