I would like to update a table cell value by click on that. I have tried in following way. But all the rows are getting affected instead of single row. I have given unique index but I don't know where I went wrong.
HTML Code
<html>
<body>
<tbody id="itemtab" style="width:100%;height:200px !important;font-size:12px">
</tbody>
</body>
</html>
Jquery Code
$("body").on('click','#btn',function(e){
var box=$(this).text();
console.log("Box Number to scan item code is: "+box);
/*Check box is already scanned or not*/
$.ajax({
type : 'POST',
url : '@routes.Application.isboxscanned()',
data : {
content:box,
orgname:'Intel'
},
success : function(data) {
console.log("flag"+data)
if(data==2)
{
console.log("Started Scanning through webservice");
var k;
$.ajax({
type : 'POST',
url : '@routes.Application.searchItemcodes()',
data : {
boxnumber : boxnumber,
orgname : 'IN1005'
},
success : function(jsonp) {
$("#main").slideUp();
$("#itemscanning").slideDown();
$("#itemtab").empty();
var array = jsonp.data;
$("#boxnum").text(boxnumber)
k=array.length;
for(i = 0; i < array.length; i++){
console.log(array[i].documentno);
console.log(array[i].upc);
console.log(array[i].itemcode);
console.log(array[i].modelname);
console.log(array[i].quantity);
if(jsonp.data=="noresult")
{
$('#boxmsg').show();
}
else{
var table = '<tr class="active" style="height:40px;font-weight:bold">';
table+= '<td><input type="checkbox" checked disabled /></td>'
table += '<td id='+k+'>'+k+'</td>';
table += '<td id='+array[i].documentno+'>'+array[i].documentno+'</td>';
table += '<td id='+array[i].upc+'>'+array[i].upc+'</td>';
table += '<td id='+array[i].itemcode+'>'+array[i].itemcode+'</td>';
table += '<td> '+array[i].modelname+'</td>';
table += '<td>' + array[i].quantity + '</td>';
table += '<td id="my'+k+array[i].itemcode+'" class="editable">' + array[i].quantity + '</td>';
table += '</tr>';
$row = table;
k=k-1;
$("#itemtab").prepend($row);
}
}
},
error : function() {
alert("Error IN UP")
}
});
}
else
{
console.log("Search in Localdb");
$.ajax({
type : 'POST',
url : '@routes.Application.getitemsfromlocal()',
data : {
boxnum:box
},
success : function(data) {
$("#main").slideUp();
$("#itemscanning").slideDown();
$("#itemtab").empty();
$("#boxnum").text(box)
$.each(data, function(m, item) {
var table = '<tr class="active" style="height:40px;font-weight:bold">';
table+= '<td><input type="checkbox" checked disabled/></td>'
table += '<td id='+item[0]+'>'+item[0].trim()+'</td>';
table += '<td id='+item[1]+'>'+item[1].trim()+'</td>';
table += '<td id='+item[2]+'>'+item[2].trim()+'</td>';
table += '<td id='+item[3]+'>'+item[3].trim()+'</td>';
table += '<td> '+item[4]+'</td>';
table += '<td>' + item[5] + '</td>';
table += '<td id="myid'+k+item[3].trim()+'" class="editable">' + item[6] + '</td>';
table += '</tr>';
$row = table;
$("#itemtab").prepend($row);
});
},
error : function() {
console.log("Error in Searching Local DB");
}
});
}
},
error : function() {
console.log("errr");
}
});
$("#itemtab").on('click','.editable',function(e){ //assign event to editableTD class
var i=0;
var id=$(this).attr('id');
e.stopPropagation(); //<-------stop the bubbling of the event here
var value = $('#'+id).html();
console.log(id+i);
updateVal('#'+id, value);
});
function updateVal(currentEle, value) {
console.log("Current Element is"+currentEle);
$(currentEle).html('<input class="thVal" maxlength="4" type="text" width="2" value="0" />');
$(".thVal").focus();
$(".thVal").keyup(function (event) {
if (event.keyCode == 13) {
$(currentEle).html($(".thVal").val().trim());
//$(currentEle).html($(".thVal").val().trim());
}
});
$(document).click(function () { // you can use $('html')
$(currentEle).html($(".thVal").val().trim());
});
}
The above code is updating properly. But the problem is its updating value in all the rows. For example one column has 3 values namely 10,20,30. if i update 10 to 12 it is updating in all the column. Please look into this and provide solution