Either you put all data that you need to post back upon submit into form fields and browser sends it, or you use some javascript like jQuery to manipulate your html table's DOM, extract data on the clientside and send it via ajax request in form of JSON or XML to be parsed serverside.
It's quite strange requirements, though. Since data in the table originates from the same server that processes response, it would be sufficient to respond with a set of row identifiers, by which the server would recognize full row data.
You could pass these identifiers with checkboxes' values: <input type="checkbox" name="check1" class="checker" value="${cust.id}" />. Then, following HTML standard, only checkboxes having checked or checked="checked" attribute would be included in response. Then your servlet can process all checked checkboxes and get all needed identifiers.
Extracting form data with jQuery. First, add to your <td>'s with data classes that would mark contained data, so we can select it with jQuery:
<td class="customerName">${cust.name}</td>
<td class="customerType">${cust.type}</td>
...and so on.
Include jQuery into JSP with element <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> added before closing tag. Then add another script element on the page containing our script. Here is an example:
<html>
<head>
</head>
<body>
<form action="showKwh" method="POST">
<input type="submit" value="show"/>
<table id="adminTable" class="detailsTable">
<tr class="header">
<th colspan="4">Kilowat Entry</th>
</tr>
<tr class="tableHeading">
<td></td>
<td>customer id</td>
<td>name</td>
<td>group</td>
<td>kwh</td>
<td>kwd</td>
</tr>
<tr id="123" class="lightBlue tableRow">
<td><input type="checkbox" name="check1" class="checker" value="123"/></td>
<td id="id?123" class="customerId">123</td>
<td class="customerName">Ivan</td>
<td class="customerType">Person</td>
<td class="customerKWH">54321</td>
<td><input type="text" name="txt" size="8" id="kwd123" value="98765" class="name1"/></td>
</tr>
</table>
</form>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () { //launch this code after the whole DOM is loaded
$("form").submit(function (event) { // function to process submitted table
var tableData = []; // we will store rows' data into this array
$("#adminTable") // select table by id
.find(".tableRow") // select rows by class
.has(":checked") // select only rows with checked checkboxes
.each(function () { // for each selected row extract data
var tableRow = {};
var jRow = $(this);
tableRow.customerId = jRow.find('td.customerId').text();
tableRow.customerType = jRow.find('td.customerType').text();
tableRow.customerKWH = jRow.find('td.customerKWH').text();
tableRow.costomerKWD = jRow.find('input.name1').val();
tableData.push(tableRow);
});
$.post(
"http://google.com", /*url of consuming servlet*/
{tableData: tableData}, /*data*/
function () {
alert("Success!");
}, /*function to execute in case of success*/
"json" /* data type */
);
event.preventDefault(); //Prevent sending form by browser
}
);
});
</script>
</body>
</html>
To process table values submitted by form in browser, you can consider the following approach.
HttpServletRequest inherits from ServletRequest method getParameterMap() which returns Map. ( http://docs.oracle.com/javaee/7/api/javax/servlet/ServletRequest.html#getParameterMap() ). You could parse it using some parameter names convention. For example:
Map<String, String[]> tableData = getParameterMap();
String[] idsToUpdate = tableData.get("selectedIds");
for (String id : idsToUpdate){
String kwdParamName = "kwd"+id;
String kwd = tableData.get(kwdParamName)[0];
}
One way or the other, you should parse request data somehow. Both (JSON-based and form-based) have their pro et contra. You should chose which one produces more clean and robust solution. Maybe, more pleases you aesthetically. And last, but not least, what is your client context: doest it have javascript enabled, is it single-page application or round-trip. In single-page it is more usual way to pass data back and forth via JSON. In round-trip - maybe form-based would be more practical.
