CODEWITHSUNDEEP
javascriptjqueryhtmlspring-mvc
Evan Root
Evan Root

Reputation: 279

How to receive data of a td element in the server side

<%@ 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>

I have a table in a form which doesn't have any input field but only a table that displays data . i want that on submitting the form i should be able to read the data of the td element of the table in my controller .

Something like request.getParameter("td_name") . I read that name is not a valid attribute for td . SO in this case how can i get the data of the td elements in my controller.

Upvotes: 0

Views: 221

Answers (2)

Allan Empalmado
Allan Empalmado

Reputation: 943

You could do this by adding id attribute to your td

example : <td id="mytd">This is some value</td>

Now on your java script you could do something like this:

var tdvalue = document.getElementById ( "mytd" ).innerText;

or in jQuery

var tdvalue = $("#mytd").text();

now all you have to do is pass tdvalue to your request :)

Upvotes: 0

gnllucena
gnllucena

Reputation: 824

You can go through your table and get all of your tr's or td's, for example:

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.');
    }
});

Upvotes: 1

Related Questions