I'm creating a simple table in HTML and I want to use checkboxes value to reduce dinamically the Table. The values of the checkboxes are the same of the elements and when I check one the table only shows the column selected , for shows only the names , lastname or bithrdate of DB values , like a table of Excel ,to understand. I've added also a Javascript , but I'm not too much familiar with it.
this is my Html
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<style type="text/css">
button.a {
padding: 10px;
margin: 10px;
white-space: nowrap;
height: 30px;
width: 95%;
}
.banner {
text-align: center;
color: white;
float: left;
}
button:before {
white-space: pre;
}
.a {
margin-top: 30px;
}
h1 {
font-size: 120%;
}
#wrapper {
width: 99%;
height: 500px;
border: 1px solid black;
}
button.add {
text-align: center;
position: relative;
margin-top: 15px;
margin: -5px -50px;
width: 195px;
height: 5%;
top: 85%;
left: -35%;
padding: 15px;
white-space: nowrap;
vertical-align: middle;
line-height: 1%;
}
.container {
width: 1000px;
}
.left, .right {
float: left;
width: 45%;
display: inline-block;
margin: 25px;
}
</style>
<link rel="stylesheet" type="text/css" href="/Esercitazione/my.css">
<%@page import="java.sql.*"%>
<title>Aggiungi un paziente</title>
</head>
<body style="font-family: verdana;">
<div class="container">
<div class="banner"
style="width: 1300px; height: 70px; padding: 15px; background-color: #3232FF; color: 0477f4">
HMWES <br /> <br /> <br />Benvenuto
</div>
<div class="new">
<div class="left">
<a href="insert.jsp"><button
style="background-color: #8F9696; border-color: black; color: black"
class="a">AGGIUNGI UN PAZIENTE</button></a> <a href="insertDevice.jsp"><button
style="background-color: #8F9696; border-color: black; color: black"
class="a">AGGIUNGI UN DEVICE</button></a> <a href="assignDevice.jsp"><button
style="background-color: #8F9696; border-color: black; color: black"
class="a">CREA UNA NUOVA CONFIGURAZIONE PAZIENTE</button></a> <a
href="measurelog.jsp"><button
style="background-color: #8F9696; border-color: black; color: black"
class="a">LOG DELLE MISURAZIONI</button></a> <a href="eventslog.jsp"><button
style="background-color: #8F9696; border-color: black; color: black"
class="a">LOG EVENTI</button></a> <a href="timeschedules.jsp"><button
style="background-color: #8F9696; border-color: black; color: black"
class="a">TIME SCHEDULES</button></a>
</div>
</div>
<div class="right">
<h1 style="font-family: verdana;">Aggiungi un Paziente</h1>
<form class="ciao" action="./ServletInsert" method="post"
id='rosesearch'>
<div class="form-row">
<div class="editor-cell">
<label>IdPaziente:</label> <input type="number" name="Idpaziente"
class="category" />
</div>
<div class="editor-cell">
<label>Nome:</label> <input type="text" name="nome"
class="category""/>
</div>
<div class="editor-cell">
<div class="center">
<label>Cognome:</label>
</div>
<input type="text" name="cognome" class="category""/>
</div>
<div class="editor-cell">
<label>CF:</label> <input type="text"
pattern="^[A-Z]{6}\d{2}[A-Z]\d{2}[A-Z]\d{3}[A-Z]$"
required="required"
title="Inserisci il codice fiscale correttamente" name="CF"
class="category" />
</div>
<div class="editor-cell">
<label>Data di Nascita:</label> <input type="date" name="bithDate"
class="category" />
</div>
<div class="editor-cell">
<label>Codice:</label> <input type="text" name="code"
class="category" />
</div>
<div id="wrapper">
<button
style="background-color: #8F9696; border-color: black; color: black"
class="add" onclick='foo();'>Inserisci Il Paziente</button>
</div>
<script>
</script>
</div>
</form>
<%
String url = "jdbc:sqlserver://localhost:1433;databaseName=hmwes;integratedSecurity=true";
try {
Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver").newInstance();
Connection conn = DriverManager.getConnection(url);
Statement st = conn.createStatement();
ResultSet rs = st.executeQuery("select * from Patients;");
%>
</div>
<form name="FilterForm" id="FilterForm" action="" method="">
<input type="checkbox" name="filterStatus" value="name " /> <label
for="filter_1">PatientId</label> <input type="checkbox"
name="filterStatus" value="lastname" /> <label for="filter_2">Name</label>
<input type="checkbox" name="filterStatus" value="cf" /> <label
for="filter_3">lastname</label>
</form>
<table class="table-info table" border=1 align=center
style="text-align: center">
<thead>
<tr>
<th>ID</th>
<th>PatientID</th>
<th>Name</th>
<th>Lastname</th>
<th>CF</th>
<th>Birthdate</th>
<th>Code</th>
</tr>
</thead>
<tbody>
<%
while (rs.next()) {
%>
<tr>
<td><%=rs.getInt("id")%></td>
<td><%=rs.getInt("patientId")%></td>
<td><%=rs.getString("name")%></td>
<td><%=rs.getString("lastname")%></td>
<td><%=rs.getString("cf")%></td>
<td><%=rs.getString("birthDate")%></td>
<td><%=rs.getString("code")%></td>
<td><a href="DeleteServlet?id=<%=rs.getString("id")%>"
class="delete"
onclick="return confirm('Sei sicuro di voler eliminare il paziente selezionato?');">
<button
style="background-color: #8F9696; border-color: black; color: black"
id="<%=rs.getString("id")%>" type="submit" name="delete">Delete</button>
</a> <a
href="updateInsert.jsp?id=<%=rs.getString("id")%>&name=<%=rs.getString("name")%>&lastname=<%=rs.getString("lastname")%>&cf=<%=rs.getString("cf")%>&birthdate=<%=rs.getString("birthDate")%>&code=<%=rs.getString("code")%>"
class="delete"
onclick="return confirm('Sei sicuro di voler aggiornare il paziente selezionato?');">
<button
style="background-color: #8F9696; border-color: black; color: black"
id="<%=rs.getString("id")%>" type="submit" name="delete">Update</button>
</a></td>
</tr>
<%
}
%>
</tbody>
</table>
<!-- </section> -->
<script src="function.js"></script>
<br>
<%
} catch (Exception e) {
out.print(e.getMessage());
%><br>
<%
}
%>
</div>
</body>
</html>
this is my simple javascript, I'm not so familiar with it.
$("input[name='filterStatus']").change(function () {
var classes = [];
$("input[name='filterStatus']").each(function () {
if ($(this).is(":checked")) { classes.push('.' + $(this).val()); }
});
if (classes == "") { // if no filters selected, show all items
$("#StatusTable tbody tr").show();
} else { // otherwise, hide everything...
$("#StatusTable tbody tr").hide();
$("#StatusTable tr").each(function () {
var show = true;
var row = $(this);
classes.forEach(function (className) {
if (row.find('td' + className).html() == ' ') { show = false; }
});
if (show) { row.show(); }
});
}
});