如何在 JSP 中的“单击”复选框时创建删除按钮

how to create a delete button when onclick checkbox in jsp?

本文关键字：复选框 创建 删除 按钮 单击 JSP 中的      更新时间：2023-09-26

我想在单击复选框时在jsp页面上显示或插入一个按钮。这是我的代码。它不起作用。这是我的索引.jsp页面谁能帮我？？

JSP 页面 

     function validateForm()
    {   var validfirstUsername = document.form.text1.value.match(/^[A-Za-z ]{3,20}$/);
        var validage=document.form.text2.value.match(/^[1-9]?[0-9]{1}$|100/);
        var validphoneno = document.form.text3.value.match(/^'d{10}$/);  

      if(validfirstUsername == null){
      alert("Your first name is not valid");
      document.form.text1.value = "";
      return false;
      }
      if(validage ==null){
      alert("Your  age is not valid");
      document.form.text2.value = "";
      return false;
      }
       if( validphoneno==null){
      alert("Your phone no is not valid");
      document.form.text3.value = "";
      return false;
      }
}                       

   </script>
</head>
<body style= "background-image: url(index.jpeg);background-repeat:no-repeat;" >
    <div id="new"> 
 <%! 
  Connection con;
  PreparedStatement ps;
  ResultSet rs;
  String q;
   %>
 <% try{
  Class.forName("com.mysql.jdbc.Driver");
  con = DriverManager.getConnection("jdbc:mysql://localhost/jspdatabase","root", "kca@fnpl#12");
  Statement st=con.createStatement();
 }catch(Exception e){}%>

  <h1>Enter student details....</h1>
  <%! public void checkid(String a){%>
            <input type="submit" value="Delete" name="delete" />

     <%!  }%>

  <form name="form" action="submit.jsp"method="post" onsubmit="return validateForm()" method="post"> 
      <center> Name:&nbsp<input type="text" name="text1" value="" /><br><br>
        Age :&nbsp &nbsp&nbsp<input type="text" name="text2" value="" /><BR><br>
        Sex :&nbsp &nbsp  male<input type="radio" name="bg" value="male"/>
        female<input type="radio" name="bg" value="female" /><BR><br>
        phone no:<input type="text" name="text3" value="" /><BR><br>
        Date:<select name="date">
            <% for(int i=1;i<32;i++){%>
            <option><%=i%></option>
            <%}%>
        </select>
        <select name="month">
             <% for(int i=1;i<13;i++){%>
            <option><%=i%></option>
            <%}%>
        </select>
        <select name="year">
             <% for(int i=1990;i<1996;i++){%>
            <option><%=i%></option>
            <%}%>
        </select><br><br>
        <input type="submit" value="submit" name="submit" />

  </form>   

        <% 
         q="select id,name,age,sex,phone,date,mark1,mark2 from table1";
         try{
         ps = con.prepareStatement(q);
         rs = ps.executeQuery();
         }
         catch(Exception e){
        }%>
          <table border="1">
            <thead>
                <tr>
                    <th>selection</th>
                    <th>id</th>
                    <th>name</th>
                    <th>age</th>
                    <th>sex</th>
                    <th>phone</th>
                    <th>date_of_birth</th>
                    <th>mark1</th>
                    <th>mark2</th>
                </tr>
            </thead>
            <tbody>
        <% 
                while(rs.next())
        {
         %>                
         <tr>
             <td><input type="checkbox"  name="check"  value="off" onClick="checkid(<%=rs.getString(1) %>);"/></td>
                    <td><%=rs.getString(1)%></td>
                     <td><%=rs.getString(2)%></td>
                      <td><%=rs.getString(3)%></td>
                       <td><%=rs.getString(4)%></td>
                        <td><%=rs.getString(5)%></td> 
                          <td><%=rs.getString(6)%></td>
                           <td><%=rs.getString(7)%></td>
                            <td><%=rs.getString(8)%></td>

                </tr>  
       <%}

          %>
</tbody>
            </table>
           </center>
        </form>
    </body>
    </div>
</html>

谢谢...

你的checkid函数在<%标签下并在服务器端运行，同时onclick=将只执行javascript，即客户端。

创建客户端函数checkid：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function checkid(id) {
    $('#delete_button').show();
}
</script>
<input type="button" id="delete_button" style="display: none" value="Delete"/>

单击复选框时

$(document).ready(function(){
   $('input[type="checkbox"]').bind('click',function() 
   {
     alert($(this).is(":checked"));
     //Or you could use alert($(this).attr("checked") == "checked");
   });
});

基于检查写入功能

相关文章：