Each row of the table has three drop-down box values that need to be obtained.
html code:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.DriverManager"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<head>
<base href="<%=basePath %>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Query the usage status of each software</title>
<link rel="stylesheet" type="text/css" href="css2moban/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css2moban/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="css2moban/style.css" />
<script type="text/javascript" src="Js/jquery.js"></script>
<!-- <script type="text/javascript" src="Js/jquery.sorted.js"></script> -->
<script type="text/javascript" src="Js/bootstrap.js"></script>
<script type="text/javascript" src="Js/ckform.js"></script>
<script type="text/javascript" src="Js/common.js"></script>
<style type="text/css">
body {
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
@media (max-width: 980px) {
/* Enable use of floated navbar text */
.navbar-text.pull-right {
float: none;
padding-left: 5px;
padding-right: 5px;
}
}
</style>
</head>
<body style="overflow-x: hidden">
<table id="tab"class="table table-bordered table-hover definewidth m10" >
<thead>
<tr>
<th>Software number</th>
<th>Software name</th>
<th>Establishment unit</th>
<th>Responsible Person</th>
<th>Proficiency</th>
<th>Participation ratio</th>
<th>Satisfaction</th>
<th>Operation</th>
</tr>
</thead>
<c:forEach items="${list}" var="s" varStatus="i">
<tr>
<td>${s.soid}</td>
<td>${s.soname}</td>
<td>${s.socompany}</td>
<td>${s.soHead}</td>
<td>
<select id="skilled" name="skilled">
<option value="None"></option>
<option value="Not mastered">Not mastered</option>
<option value="Proficient">Proficient</option>
<option value="Proficient">Proficient</option>
<option value="General">General</option>
</select>
</td>
<td>
<select id="percent" name="percent">
<option value="0"></option>
<option value="10">More than 10%</option>
<option value="30">More than 30%</option>
<option value="50">More than 50%</option>
<option value="80">More than 80%</option>
<option value="100">100%</option>
</select>
</td>
<td>
<select id="satisfaction" name="satisfaction">
<option value="None"></option>
<option value="Very satisfied">Very satisfied</option>
<option value="Satisfied">Satisfied</option>
<option value="More satisfied">More satisfied</option>
<option value="General">General</option>
<option value="Not satisfied">Not satisfied</option>
</select>
</td>
<td><input id="see" type="button" class="see" value="${s.soid}"></td>
</tr>
</c:forEach>
</table>
<table>
<tr>
<td><button type="button" class="btn btn-success" id="back1">Back</button></td>
</tr>
</table>
\t
</body>
</html>
Web page renderings:
It is necessary to obtain the software number, proficiency, participation ratio, and satisfaction values at the same time. I tried using the following js click function, etc., but no matter which row is clicked, only the value of the first row can be obtained.
<script>
$(function () {
$('#back1').click(function(){
window.location.href="<%=basePath%>/SelectResult";
});
});
function submit(){
var skilled = $('#skilled option:selected');
var percent = $('#percent option:selected');
var satisfaction = $('#satisfaction option:selected');
var soid = (document.getElementById('see').value);
window.location='<%=basePath%>/QueryResultByCondition?soid=' + soid + ' & amp;skilled=' + skilled.val() + ' & amp;percent=' + percent. val() + ' & amp;satisfaction=' + satisfaction.val() + '';
}
</script>
After several days of learning attempts, I was inspired and thought of a solution, which is to nest the form form in the table and pass the value to the Servlet through the form form.
The complete jsp code is as follows:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.DriverManager"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<head>
<base href="<%=basePath %>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Query the usage status of each software</title>
<link rel="stylesheet" type="text/css" href="css2moban/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css2moban/bootstrap-responsive.css" />
<link rel="stylesheet" type="text/css" href="css2moban/style.css" />
<script type="text/javascript" src="Js/jquery.js"></script>
<!-- <script type="text/javascript" src="Js/jquery.sorted.js"></script> -->
<script type="text/javascript" src="Js/bootstrap.js"></script>
<script type="text/javascript" src="Js/ckform.js"></script>
<script type="text/javascript" src="Js/common.js"></script>
<style type="text/css">
body {
padding-bottom: 40px;
}
.sidebar-nav {
padding: 9px 0;
}
@media (max-width: 980px) {
/* Enable use of floated navbar text */
.navbar-text.pull-right {
float: none;
padding-left: 5px;
padding-right: 5px;
}
}
</style>
</head>
<body style="overflow-x: hidden">
\t
<table id="tab"class="table table-bordered table-hover definewidth m10" >
<thead>
<tr>
<th>Number</th>
<th>Software number</th>
<th>Software name</th>
<th>Establishment unit</th>
<th>Responsible person</th>
<th>Proficiency</th>
<th>Participation ratio</th>
<th>Satisfaction</th>
<th>Operation</th>
</tr>
</thead>
<c:forEach items="${list}" var="s" varStatus="i">
<tr>
<td>${i.count}</td>
<td>${s.soid}</td>
<td>${s.soname}</td>
<td>${s.socompany}</td>
<td>${s.soHead}</td>
<form action="<%=basePath%>/QueryResultByCondition" class="searchResult" method="post">
<td>
<select id="skilled" name="skilled">
<option value="None"></option>
<option value="Not mastered">Not mastered</option>
<option value="Proficient">Proficient</option>
<option value="Proficient">Proficient</option>
<option value="General">General</option>
</select>
</td>
<td>
<select id="percent" name="percent">
<option value="0"></option>
<option value="10">More than 10%</option>
<option value="30">More than 30%</option>
<option value="50">More than 50%</option>
<option value="80">More than 80%</option>
<option value="100">100%</option>
</select>
</td>
<td>
<select id="satisfaction" name="satisfaction">
<option value="None"></option>
<option value="Very satisfied">Very satisfied</option>
<option value="Satisfied">Satisfied</option>
<option value="More satisfied">More satisfied</option>
<option value="General">General</option>
<option value="Not satisfied">Not satisfied</option>
</select>
</td>
<td><input type="submit" name="soid" value="${s.soid}"/></td>
</form>
</tr>
</c:forEach>
</table>
<table>
<tr>
<td><button type="button" class="btn btn-success" id="back1">Back</button></td>
</tr>
</table>
\t
</body>
</html>
<script>
$(function () {
$('#back1').click(function(){
window.location.href="<%=basePath%>/SelectResult";
});
\t
});
</script>
The knowledge points of the article match the official knowledge files, and you can further learn related knowledge. Java Skill TreeHomepageOverview 137087 people are learning the system