In this tutorial, you will learn how to hide and show html tables using javascript in jsp.

JSP hide and show tables

In this tutorial, you will learn how to hide and show html tables using javascript in jsp. Here is an example of simple jsp code which is having a table consists of database data and a Go button. Using the style attribute, we have made table invisible. But, when the user click Go button, table will be visible with all the data.

Example:

<%@page language="java"%>
<%@page import="java.sql.*"%>
<script>
function sh(){
document.getElementById("tab").style.visibility="visible";
}
</script>
<input type="button" value="Go" onclick="sh();"><br>
<table border="1" id="tab" style="visibility:hidden;">

<%
try {
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test", "root", "root");
String query = "select * from employee";
Statement st = conn.createStatement();
ResultSet rs = st.executeQuery(query);
while(rs.next()){
%>
<tr>
<td><input type="text" name="name" value="<%=rs.getString("name")%>"></td><td><input type="text" name="address" value="<%=rs.getString("address")%>"></td><td>Contact No</td><td><input type="text" name="contact" value="<%=rs.getInt("contactNo")%>"></td><td><input type="text" name="email" value="<%=rs.getString("email")%>"></td></tr>
<%
}
}
catch(Exception e){}
%>
</table>

Related Tags for JSP hide and show tables: