个人中心
gpt4 book ai didi

javascript - 如何在服务器端接收td元素的数据

转载 作者：行者123 更新时间：2023-12-03 06:38:55 26 4
gpt4 key购买 nike 

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec"
	uri="http://www.springframework.org/security/tags"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Modify Index Order</title>
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet"
	href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href='<c:url value="/static/css/header.css" />'>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>

<script
	src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>

<script
	src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>

<!-- <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.draggable.js"></script> -->
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script
	src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>

<script
	src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
<style type="text/css">
table {
	table-layout: fixed;
	word-wrap: break-word;
}

th {
	text-align: center;
}

#serviceSelect {
	text-align: center;
}

#serviceSelect {
	margin: auto;
	width: 30%;
}

#removeSelect {
	text-align: center;
}

#removeSelect {
	margin: auto;
	width: 30%;
}

#123 {
	margin: auto;
	width: 50%;
}

p {
	font: bold;
}

.editrow {
	border: 3px solid red;
}
</style>
</head>
<body>
	<jsp:include page="../shared/header.jsp">
		<jsp:param value="modifyIndexOrder" name="currentPage" />
	</jsp:include>
	<form class="form-horizontal" role="form" action="updateIndexOrder"
		method=POST id="form2">
		<div class="table-responsive12">
	<table class="table table-bordered table-striped table-highlight"
		id="tab_logic">
		  <tbody>
			<tr>
				<th style="width: 20%">IndexOrder</th>
				<th style="width: 20%">Name</th>
				<th style="width: 20%">CatKey</th>
			</tr>
		</tbody>  
	</table>
	<table class="table table-bordered table-striped table-highlight"
				id="submittable">
				<tr id="submit123">
					<td colspan="3" align="center">
						<div class="form-group">
							<button type="submit" class="btn btn-success btn-md" id="submit">Submit</button>
						</div>
					</td>
				</tr>
	</table>
	</div>
</form>
<script type="text/javascript">
		
		$(function() {
			loadTable();
			$("#tab_logic").sortable({
				items : "tr:not(th)",
				helper : "clone",
				update : function() {
					alert("success");
				}
			}).disableSelection();
		//	print();
			
		});
		
		function loadTable(){
			 $.ajax({
				type : "GET",		
				dataType : 'json',
				async : false,
				url : "modifyIndex",
				success : function(data) {
					loadData(data);
				},
				error : function() {
					alert("error");
				}

			}); 
		}
		function loadData(data){
			alert("success");
			var htm="<tr><th style='width:20%'>IndexOrder</th><th style='width:20%'>Name</th><th style='width:20%'>CatKey</th></tr>";
			for(var i=0;i<data.length;i++)
			{
				htm+="<tr><td name='io"+i+"'>"+data[i].indexOrder+"</td><td name='na"+i+"'>"+data[i].name+"</td><td name='ca"+i+"'>"+data[i].catKey+"</td></tr>";
				
			}
			$("#tab_logic").html(htm);
		}
		function print()
		{
			var order = $("#tab_logic td");
			var i = 1;
			var col = 1;
			order.each(function() {
				var t = $(this).attr('name');
				alert(t);
				
			});
		} 

	
	</script>
</body>
</html>

我的表单中有一个表格，没有任何输入字段，只有一个显示数据的表格。我希望在提交表单时我应该能够读取 Controller 中表格的 td 元素的数据。

类似 request.getParameter("td_name") 。我读到 name 不是 td 的有效属性。那么在这种情况下，我如何获取 Controller 中 td 元素的数据。

最佳答案

您可以浏览表格并获取所有 tr 或 td，例如:

var products = [];
$('#table tbody tr').each(function (index, tr) {
    var product = {
        Id: Number($(tr).find('td:nth-child(1)').text()),,
    }

    products.push(product);
});

$.post('/Url/Post', { products: products }, function (response, status) {
    console.log(response);

    if (status === 'success') {
        alert('Success.');
    }
});

关于javascript - 如何在服务器端接收td元素的数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38057071/

26 4 0
文章推荐： css - 如何将 bootstrap-vue 图标包含到 nuxtjs 中？导航栏向下箭头的问题
文章推荐： Selenium:如何将值从field1复制到field2？
文章推荐： angularjs - 使用 .getJSON() 填充 $scope
文章推荐： vue.js - Vue 3 如何获取有关 $children 的信息
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com