I have a table inside a form that looks as follows:
<td><input type="text" name="code[0]" id="code[0]"/></td>
<td><input type="text" name="name[0]" id="name[0]"/></td>
<td><input type="text" name="cost[0]" id="cost[0]"/></td>
<td><input type="text" name="quantity[0]" id="quantity[0]"/></td>
<td><input type="text" name="total[0]" id="total[0]" value=""/></td>
When the code changes, the name and cost should change according, the data is re-fetched form the server. That I have done.
One can delete a given row while at any given row by clicking the row. I need to get the row column and attach the delete command,which remove the selected row and re-update the remaining rows with the respective data.
My challenge is getting the correct row and column to update.
This is what i have done: This is what I have done
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<link href="jquery-ui.css" type="text/css"/>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>
<script>
function addRow(){
var n=$("#itemsTable tbody tr").length;
var tds="<tr id='row"+n+"'>";
tds+="<td><img src='ico.ico' onclick='removeRow(this);'/></td>";
tds+="<td><input type='text' name='code' id='code' onchange='searchByCode(this);'/></td>";
tds+="<td><input type='text' name='name' id='name' onkeyup='search(this);'/></td>";
tds+="<td><input type='text' name='cost' id='cost' onchange='rowTotal(this);'/></td>";
tds+="<td><input type='text' name='quantity' id='quantity' onchange='rowTotal(this);'/></td>";
tds+="<td><input type='text' name='value' id='value' readonly/></td>";
tds+="</tr>";
$("#itemsTable tbody").append(tds);
init();
}
function search(row){
$('#name').autocomplete('product/autocomplete',function(data){
//update this row
var products=data['details'];
for(var i=0;i<products.length;i++){
var product=products[i];
$('#code').val(product.code);
$('#name').val(product.name);
$('#cost').val(product.cost);
}
});
}
function searchByCode(row){
var code=$(row).$('#name').val();
$.getJSON('product/searchbycode',function(data){
//update this row
var products=data['details'];
for(var i=0;i<products.length;i++){
var product=products[i];
$('#code').val(product.code);
$('#name').val(product.name);
$('#cost').val(product.cost);
}
});
}
function init(){
//this is just to give an idea or the rows, but are added dynamically
var rows=$("#itemsTable tbody tr").length;
for(var i=0;i<=rows;i++){
$("input[name='code']").val(1001);
$("input[name='name']").val("Bread");
$("input[name='cost']").val(40);
$("input[name='quantity']").val(1);
}
}
function removeRow(row){
$(row).closest('tr').remove();
}
function rowTotal(row){
var rowindex=$(row).closest('tr').index();
//how do i get the row values here
var value=0;
var cost=parseFloat($("input[name='cost']").val());
var quantity= parseFloat($("input[name='quantity']").val());
value=cost*quantity;
$("input[name='value']").val(value.toFixed());
}
function sumTotal(rows){
var rows=$('#itemsTable tbody tr').lenght;
var value=0;
//i ca
for(var i=0;i<rows;i++){
var cost=parseFloat($("input[name='cost']").val());
var quantity= parseFloat($("input[name='quantity']").val());
value=cost*quantity;
$("input[name='sum']").val()
}
}
</script>
<script>
$(document).ready(function(){
var i=0;
while(i<4){
addRow();i++;
}
});
</script>
</head>
<body>
<table id="itemsTable">
<thead></thead>
<tbody></tbody>
<tfoot><input type='text' value='0' id='sum'name="sum" /></tfoot>
</table>
</body>
</html>
