表格table单元格里的下拉框的选中值如何获取

已于 2023-10-11 15:34:12 修改
阅读量191 收藏
点赞数
分类专栏： javaweb 文章标签： servlet java 开发语言
于 2023-10-09 10:15:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43334261/article/details/133695302
版权

表格table的每一行有三个下拉框的值需要获取

html代码：

<%@ 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>查询各软件使用情况</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>软件编号</th>
        <th>软件名称</th>
        <th>编制单位</th>
        <th>责任人</th>
        <th>熟练度</th>
        <th>参与比例</th>
        <th>满意度</th>
        <th>操作</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="无"></option>
                  	<option value="未掌握">未掌握</option>
                  	<option value="精通">精通</option>
                  	<option value="熟练">熟练</option>
                  	<option value="一般">一般</option>
                  </select>
            </td>
            <td>
            	<select id="percent" name="percent">
                   	<option value="0"></option>
                   	<option value="10">10%以上</option>
                   	<option value="30">30%以上</option>
                   	<option value="50">50%以上</option>
                   	<option value="80">80%以上</option>
                   	<option value="100">100%</option>
	            </select>
            </td>
            <td>
            	<select id="satisfaction" name="satisfaction">
                   	<option value="无"></option>
                   	<option value="很满意">很满意</option>
                   	<option value="满意">满意</option>
                   	<option value="较满意">较满意</option>
                   	<option value="一般">一般</option>
                   	<option value="不满意">不满意</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">返回</button></td>
		 </tr>
	 </table>
	 
</body>
</html>

网页效果图：

需要同时获取软件编号、熟练度、参与比例、满意度的值，尝试了使用如下js点击函数等，但不管点击哪一行的操作，都只能获取到第一行的值

<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 + '&skilled='+skilled.val()+'&percent='+percent.val()+'&satisfaction='+satisfaction.val() + '';
 }
</script>

在几天的学习尝试中，受到了启发，想到一种解决方法，就是在table中嵌套form表单，通过form表单来传值到Servlet

jsp完整代码如下：

<%@ 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>查询各软件使用情况</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>编号</th>
        <th>软件编号</th>
        <th>软件名称</th>
        <th>编制单位</th>
        <th>责任人</th>
        <th>熟练度</th>
        <th>参与比例</th>
        <th>满意度</th>
        <th>操作</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="无"></option>
	                  	<option value="未掌握">未掌握</option>
	                  	<option value="精通">精通</option>
	                  	<option value="熟练">熟练</option>
	                  	<option value="一般">一般</option>
	                  </select>
	            </td>
	            <td>
	            	<select id="percent" name="percent">
	                   	<option value="0"></option>
	                   	<option value="10">10%以上</option>
	                   	<option value="30">30%以上</option>
	                   	<option value="50">50%以上</option>
	                   	<option value="80">80%以上</option>
	                   	<option value="100">100%</option>
		            </select>
	            </td>
	            <td>
	            	<select id="satisfaction" name="satisfaction">
	                   	<option value="无"></option>
	                   	<option value="很满意">很满意</option>
	                   	<option value="满意">满意</option>
	                   	<option value="较满意">较满意</option>
	                   	<option value="一般">一般</option>
	                   	<option value="不满意">不满意</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">返回</button></td>
		 </tr>
	 </table>

	 
</body>
</html>
<script>
$(function () {
    

	$('#back1').click(function(){

			window.location.href="<%=basePath%>/SelectResult";
	 });
	
});
 
</script>

暖光呐
关注
专栏目录
poi怎么设置某个单元格为下拉框_如何用JAVA（如poi、jxl等）读取excel文件中的下拉框单元格的值。...
weixin_39624774的博客
12-19 688
import jxl.*;import jxl.format.UnderlineStyle;import jxl.write.*;import jxl.write.Number;import jxl.write.Boolean;import java.io.*;class excel {public excel() {}/*** 读取excel** @param filepath*/public ...
bootstrap 下拉列表获取_Bootstrap selectpicker 下拉框多选获取选中value和多选获取文本值...
weixin_30824121的博客
01-26 438
1.页面代码：页面引入：bootstrap-select.min.css和bootstrap-select.min.js、defaults-zh_CN.min.js文件，并初始化下拉选项框。带有下拉搜索样式的下拉框属性：data-live-search="true"下拉选项框可多选属性：multiple车班名称：-- 请选择 --th:value="${iterator.idTrafficVehi...
bootstraptable ( bootstrap 中的表格)
zhang_zan
12-04 1390
使用 bootstraptable创建表格 一、初始化 1、HTML编写 引人css和js <link rel="stylesheet" href="{% static 'plugins/bootstrap-table/dist/bootstrap-table.min.css' %}"> <script src="{% static 'plugins/bootstrap-table/dist/bootstrap-table.min.js' %}"></script> &l
bootstrap获取下拉框数据_基于bootstrap 实现下拉框搜索功能
weixin_39782500的博客
12-18 852
由于项目中下拉项内容太多，所以需要用到搜索功能，因此用bootstrap的下拉可以完美实现第一项首先我需要从后台取到下拉的内容添加到select中封装添加option的函数function addOptions(container,list,value,desc) {var selectObj = document.getElementById(container);if(selectObj){v...
获取table所选行某列的属性值
lyf_ldh的博客
02-06 588
 var len = document.forms[0].chk.length; for(var i=0;i<len;i++){ if(document.forms[0].chk[i].checked){ alert(document.forms[0].requestNum[i].value+"qwe"); } } chk为复选框name...
vue+Element中table表格实现可编辑（select下拉框）
11-20
最近在工作中遇到一个问题，需要在表格中实现数据可编辑状态，具体情况是需要在单元格里加入下拉框；并且每个下拉框的数组数据是不一样的，具体是根据当前行前面数据的id查询而来，前面的是数据是动态生成的，后面的...
layui 数据表格下拉框_LayUi数据表格中嵌套下拉框
weixin_29435115的博客
12-24 2965
layui嵌套下拉框实用方法(附效果图)在做项目时遇到一个问题，在layui 的数据表格table里面如何做一个下拉框呢？效果图如下： 这样的效果想必是最理想的了思路分析：我们可以通过layui的表单监听的方式实现效果form.on('select(stateSelect)',function(){});接下来我就直接开诚布公，放源码首先：我们设置一下下拉框的样式，进行美化一下/* 设置下拉框的高...
element表格添加下拉框_使用elementUI的日期时间选择器+下拉菜单+tab切换+table表格完成排行榜的切换及按年月周查询(部分代码)...
weixin_39637571的博客
12-22 1057
:value-format="type==='year'?'yyyy':type==='month'?'yyyy-MM':'yyyy-MM-dd'":format="type==='year'?'yyyy':type==='month'?'yyyy-MM':'yyyy 第 WW 周'":placeholder="type==='year'?'选择年':type==='month'?'选择月':'选...
python表格控件_pyqt 实现table输出
weixin_39860919的博客
11-23 755
QTableWidget是QT程序中常用的显示数据表格的空间，很类似于VC、C#中的DataGrid。说到QTableWidget，就必须讲一下它跟QTabelView的区别了。QTableWidget是QTableView的子类，主要的区别是QTableView可以使用自定义的数据模型来显示内容(也就是先要通过setModel来绑定数据源)，而QTableWidget则只能使用标准的数据模型，并...
2015-2030年的日历，要突出当前日期，并可以通过点击←→按钮更改月份。通过查询数据库，可以按日期把数据表ot_apply中所有employee_id的event内容都以文本的形式输出到对应日期的单元格里。当鼠标指向该文本时会弹出窗口显示该event的详情。请生成完整代码
最新发布
05-27
// 获取日历表格和事件详情弹窗 var calendarBody = document.getElementById("calendarBody"); var eventDetails = document.getElementById("eventDetails"); // 生成日历 generateCalendar(currentDate....
在js中获取bootStrap table 的属性
weixin_30352191的博客
06-11 1893
直接看代码。。 var $table1 = $('#表格Id'); var pageNumber =$table1.bootstrapTable('getOptions').pageNumber; var pageSize= $table1.bootstrapTable('getOptions').pageSize; var sortName =...
使用jquery获取table多选框的选中值及id
又菜又爱玩的博客
09-14 1876
【代码】使用jquery获取table多选框的选中值及id。
bootstrap table 获取表格数据方式
weixin_42508745的博客
09-21 2998
获取表格所有数据 var rows=$('#xqjhDetails_table').bootstrapTable('getData') 获取选中的数据 var selected = $("#puBmxqjh_table").bootstrapTable('getSelections'); 刷新表格数据 $('#scjhqt_table').bootstrapTable("refresh"); 销毁表格 $('#scjhqt_table').bootstrapTable("destroy"); 清空表
js获取表格当前行下拉框的值
qq_41669665的博客
11-16 1358
jsp代码&lt;td&gt;&lt;B&gt;&lt;input type="button" class="btn"  value="保存"/&gt;&lt;/B&gt;&lt;/td&gt;                     &lt;td id="aipictureId" &gt;${aipicture.id}&lt
通过实例了解如何使用js获取下拉列表框内的值
Sclifftop - 保安大队长
05-23 2189
"this.options[selectedIndex].value"方法的中括号内"selectedIndex"表示先获取索引，然后由索引获取option选项，再由".value"获取到value值，还有一个方法是"this.options[selectedIndex].text"是用来获取内容
JavaScript零基础入门--笔记动力节点最新老杜(七）全套笔记精髓
qq_47518713的博客
04-10 1430
复选框的全选和取消全选 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript"> window.onload = function(){
antdPro在table表格使用Dropdown下拉菜单，并拿到列表数据
blueSkyBoy2850的博客
11-24 2078
antdpro使用table的Dropdown下拉菜单操作行数据
js 获取下拉框的值的几种方式
weixin_48584082的博客
01-07 4934
//例如：下拉框选的值 <select> <option value="0">请选择</option> <option value="1">西安</option> <option value="2">上海</option> <option value="3">武汉</option> </select> //第一种方式： var stk = document.getEleme
bootstraptable获取columns下拉框选中的值并且更新
05-24
要实现这个功能，你需要使用Bootstrap Table的onEditableSave事件来捕获编辑后的数据，然后使用jQuery或JavaScript代码来更新下拉列表的选项。 以下是一个示例代码片段，它演示了如何获取编辑后的数据并更新下拉列表的选项： ```javascript $('#table').bootstrapTable({ columns: [{ field: 'id', title: 'ID' }, { field: 'name', title: 'Name', editable: { type: 'select', source: [{ value: '1', text: 'Option 1' }, { value: '2', text: 'Option 2' }] } }], onEditableSave: function(field, row, oldValue, $el) { if (field == 'name') { //获取下拉列表的选中值 var selectedValue = $el.find('select').val(); //更新下拉列表的选项 $el.find('select').empty().append($('<option>', { value: '1', text: 'New Option 1' })).append($('<option>', { value: '2', text: 'New Option 2' })).val(selectedValue); } } }); ``` 在这个示例中，我们定义了一个表格，其中包含一个可编辑的下拉列表，它有两个选项：“Option 1”和“Option 2”。当用户编辑这个下拉列表时，我们使用onEditableSave事件来捕获编辑后的数据。在这个事件处理程序中，我们首先获取下拉列表的选中值，然后使用jQuery代码来更新下拉列表的选项。在这个例子中，我们只是添加了两个新选项，但你可以根据需要进行更改。最后，我们将原来选中的值重新设置为下拉列表中的选中值。 希望这个示例能够帮助你实现你想要的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值