I have a table and I append some rows if it is needed, when I add a row to my table the row number increase like 1, 2, 3, 4, and so on. but if I delete a row for example row number 4, it broke, and if add a new row it not start from number 4 it starts from number 5, how can I solve this problem.
this is my js code:-
$(document).ready(function () {
var rowcount, addBtn, tableBody;
addBtn = $('#addNew');
rowcount = $('#autocomplete_table tbody tr').length + 1;
tableBody = $('#autocomplete_table');
addBtn.click(function () {
$.ajax({
method: "get",
url: "book/getDepartment/" ,
success: function (data) {
console.log(data)
//rowcount=rowcount+1;
console.log(rowcount);
html = '<tr id="row_' + rowcount + '">';
html += '<td><button type="button" id="delete_' + rowcount + '" class=" btn btn-danger btn-sm remove delete_row"><i class="glyphicon glyphicon-remove-sign"></i></button></td>';
html += '<td><input type="text" data-field-name="book_name" name="book_name[]" id="book_name_' + rowcount + '" class=" form-control input-sm "></td>';
html += '<td><input type="text" data-field-name="edition" name="edition[]" id="edition_' + rowcount + '" class="form-control input-sm "></td>';
html += '<td><input type="text" required data-field-name="number" name="number[]" id="number_' + rowcount + '" class="form-control input-sm number"></td>';
html += '<td><input type="text" data-field-name="by_price" name="by_price[]" id="by_price_' + rowcount + '" class="form-control input-sm by_price"></td>';
html += '<td><input type="text" data-field-name="sell_price" name="sell_price[]" id="sell_price_' + rowcount + '" class="form-control input-sm sell_price"></td>';
html += '<td><input type="text" data-field-name="total_payment" name="total_payment[]" id="total_payment_' + rowcount + '" class="form-control input-sm total_payment"></td>';
html += '<td><select data-field-name="department" name="department[]" id="department_' + rowcount + '" class=" form-control input-sm department">';
html += '<option> انتخاب کنید...</option>';
$.each(data, function (i, item) {
html += '<option value="' + item.department_id + '">' + item.department_name + '</option>';
});
html += '</select></td>';
html += '</tr>';
rowcount++;
tableBody.append(html);
},
error: function () {
}
})
})
function delete_Row() {
var rowNo;
id = $(this).attr('id');
//console.log(id);
id_arr = id.split("_");
// console.log(id_arr);
rowNo = id_arr[id_arr.length - 1];
if (rowNo > 1) {
$('#row_' + rowNo).remove();
} else {
alert("شما نمی توانداین سطر را جذف کندید");
}
//console.log($(this).parent());
// $(this).parent().parent().remove();
}
function registerEvent() {
$(document).on('click', '.delete_row', delete_Row);
}
registerEvent();
});
success: function (data) {
rowcount = $('#autocomplete_table tbody tr').length + 1;
You have declare rowcount At Global scope that's why its value is equals to total row you add. when you delete any row you are not recounting total rows rowcount = $('#autocomplete_table tbody tr').length + 1; and it start with wrong number.just put your rowcount in side success function
Related
$(document).ready(function () {
var counter = 0;
var j=0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="form-control" name="eway_bill_no2' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="item_name' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="item_hsn' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" id="quantity'+j+'" name="quantity' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" id="price'+j+'" onfocusout="getsubTotal2()" name="amount' + counter + '" id="page"/></td>';
cols += '<td><input type="text" class="form-control" id="subtotal'+j+'" name="subtotal' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" id="discount'+j+'" onfocusout="getPrice2()" name="discount' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" id="total'+j+'" name="total' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
j++;
});
/*here we are using this to add row in this auto calculation of prize and discount is in below functions*/
getsubTotal2 = function() {
var k=0;
var numVal3 = Number(document.getElementById("quantity"+k).value);
var numVal4 = Number(document.getElementById("price"+k).value);
var totalValue2 = (numVal3 * numVal4)
document.getElementById("subtotal"+k).value = totalValue2.toFixed(2);
k++;
}
getPrice2 = function() {
var l=0;
var numVal1 = Number(document.getElementById("subtotal"+l).value);
var numVal2 = Number(document.getElementById("discount"+l).value) / 100;
var totalValue = numVal1 - (numVal1 * numVal2)
document.getElementById("total"+l).value = totalValue.toFixed(2);
l++;
}
/*the function is getting called only once help me with this i am new here
its just an GST calculating form just want auto calculation of quantity*amount and amount-discount=total;
help with this
/*the function is getting called only once help me with this i am new here
its just an GST calculating form just want auto calculation of quantity*amount and amount-discount=total;
help with this
/*the function is getting called only once help me with this i am new here
its just an GST calculating form just want auto calculation of quantity*amount and amount-discount=total;
help with this
I am trying to saved current updated row. My row contain select box and checkbox.If i change select box then selected value and checkbox status is updated.
function assignValue(itemsAll, itemLinked) {
var flage = true;
$.each(itemsAll, function (key, d) {
var tblRow = '<tr>';
tblRow += '<input id="hdnID" type="hidden" value="' + d.ItemCode + '" />';
tblRow += '<td style="width:20%"></span> ' + d.ItemCode + '</td>';
tblRow += '<td style="width:70%">' + d.ItemName + '</td>';
//alert("data"+d.Itme1);
if (itemPrice != null) {
var option = null;
for (var i = 0; i < itemPrice.d.length; i++) {
option += '<option value=' + itemPrice.d[i].ListNum + '>' + itemPrice.d[i].ListName + '</option>';
}
} else {
SessioExp(response.statusText);
}
tblRow += '<td style="width:20%"><div id="' + d.ItemCode + '"><select class="customSelect" name="dropdown">' + option + '</select></div></td>';
$.each(itemLinked, function (k, v) {
if (d.ItemCode == v.ITEMCODE) {
if (v.ISLINKED) {
tblRow += '<td style="width:10%" align="center"><span id="existingData" class="fa fa-times" aria-hidden="false" style="display: none;"></span></td>';
tblRow += '<td style="width:10%" align="center"><input type="checkbox" id="chkLinked" checked /></td>';
flage = false;
}
}
});
if (flage) {
tblRow += '<td style="width:10%" align="center"><span id="latestData" class="fa fa-check"></span></td>';
tblRow += '<td style="width:10%" align="center"><input type="checkbox" id="chkLinked"/></td>';
} else {
flage = true;
}
tblRow += '</tr>';
$("#tblStockTranslist tbody").append(tblRow);
});
}
Above code is set the row of table and my output is
Change id to class, as id must be unique in HTML like(for hidden field),
tblRow += '<input class="hdnID" type="hidden" value="' + d.ItemCode + '" />';
You can try onchange event like,
$('#tblStockTranslist').on('change','select,:checkbox',function(){
$tr = $(this).closest('tr');
code=$tr.find('.hdnID').val();
name=$tr.find('td:eq(1)').text();
value = !$(this).is(':checkbox') ? this.value : '';
// and so on...
console.log({code:code,name:name,value:value}); // make object like this
});
use this code
$("table").on("change","select",function()
{
var changed_row = $(this).parents("tr:eq(0)"),
selected_value = $(this).val();
});
Hi people i have a dynamic table (add rows from ajax requests) and i need sum and multiply values always (without a trigger event).
i have already a functions that make it with the event (blur) but i don't wanna make it by using the blur trigger.
There is a way for do it?
My code:
$.fn.sumValues = function() {
var sum = 0;
this.each(function() {
if ($(this).is(':input')) {
var val = $(this).val();
} else {
var val = $(this).text();
}
sum += parseFloat(('0' + val).replace(/[^0-9-\.]/g, ''), 10);
});
return sum;
};
function totaliza() {
var total_recep = $('input[name^="costot"]').sumValues();
$('#total_art').val(total_recep);
}
var counter = 0;
$(document).on('click', '#bt_add', function(e) {
counter++;
var tr = '<tr id="art_' + counter + '">';
tr = tr + '<td><button name="del_art' + counter + '" id="del_art' + counter + '" class="btn btn-default btn-xs del_art" type="button">DEL</button></td>';
tr = tr + '<td><input name="cbarra' + counter + '" id="cbarra' + counter + '" class="form-control" value="02020202" readonly></td>';
tr = tr + '<td><input name="art' + counter + '" id="art' + counter + '" class="form-control" value="ARTICULO" readonly></td>';
tr = tr + '<td><select name="und' + counter + '" id="und' + counter + '" class="form-control list"></select></td>';
tr = tr + '<td><input name="cal' + counter + '" id="cant' + counter + '" class="form-control numeric cal" value="0"></td>';
tr = tr + '<td><input name="cal' + counter + '" id="costou' + counter + '" class="form-control numeric cal" value="0"></td>';
tr = tr + '<td><input name="costot' + counter + '" id="costot' + counter + '" class="form-control cal" readonly value="0"></td>';
tr = tr + '</tr>';
$("#inv_recep_det tbody").append(tr);
$('.form-control').change(function() {
var number = this.name.replace('cal', '');
var costot = ($('#cant' + number).val() * $('#costou' + number).val())
$('input[name^="costot' + number + '"]').val(costot);
totaliza();
});
$('.del_art').click(function() {
var number = this.name.replace('del_art', '');
$('#art_' + number).remove();
totaliza();
});
});
https://jsfiddle.net/JuJoGuAl/kpLs9zcg/
Something like that?
http://jsfiddle.net/JuJoGuAl/0vx64u2y/
Rather than continuing in comments, I thought an answer might be of better use. Currently, you use:
$(".form-control).change(...)
to trigger the update. Some browsers may force you to lose the focus on an element to actually trigger that. Instead, change that line to:
$(".form-control").on("input", function(){ ... })
This has been discussed here: What is the difference between "change" and "input" event for an INPUT element
Other than that, I've made no changes to your fiddle: https://jsfiddle.net/snowMonkey/kpLs9zcg/5/
I am adding rows dynamically to a table based on selection yet I would like to add fadeIn effect.
I am posting the part in which I add the rows to table.
Any help will be appreciated.
(I am trying to use the fadeIn effect while adding newRow to table and removing tblGraphPattern content afterwards). I want to have the effect in the lines
$("table.selectPattern").append(newRow);
$("#tblGraphPattern tr").remove();
var newRow = $("<tr>");
newRow.attr("align","center");
newRow.css("outline", "thin solid");
for(var i = 1; i<counter;++i)
{
if($("#divSubject"+i+"").length>0)
{
var cols = "";
subjectText=$("#divSubject"+i+"").html();
if(subjectText=="Any")
{subjectVal = "?s"+selectCounter;}
else{subjectVal=$("#txtGraphSubject"+i+"").val();}
predicateText=$("#divPredicate"+i+"").html();
if(predicateText=="Any")
{predicateVal = "?p"+selectCounter;}
else{predicateVal=$("#txtGraphPredicate"+i+"").val();}
objectText=$("#divObject"+i+"").html();
if(objectText=="Any"){objectVal="?o"+selectCounter;}
else{
objectVal=$("#txtGraphObject"+i+"").val();
}
cols += '<tr><td align="right"><div id="divSelectSubject'+num+'">'+subjectText+'</div><input type="text" value="'+subjectVal+'" name="txtSelectSubject'
+ num + '" id="txtSelectSubject' + num + '"/></td>';
cols += '<td align="center"><div id="divSelectPredicate'+num+'">'+predicateText+'</div><input type="text" value="'+predicateVal+
'" name="txtSelectPredicate' + num + '" id="txtSelectPredicate' + num + '"/></td>';
cols += '<td align="left"><div id="divSelectObject'+num+'">'+objectText+'</div><input type="text" value="'+objectVal+
'" name="txtSelectObject' + num + '" id="txtSelectObject' + num + '"/></td></tr>';
newRow.append(cols);
}
num++;
}
selectCounter++;
newRow.append('<td><input type="button" class="ibtnDel" value="Delete"></td>');
$("table.selectPattern").append(newRow);
$("#tblGraphPattern tr").remove();
Make your newRow hidden by setting display:none; before appending it to table.selectPattern and then fadeIn after appending is done.
var newRow = $('<tr style="display:none;"></tr>');
// your remaining code
$("table.selectPattern").append(newRow);
$("#tblGraphPattern tr").remove();
newRow.fadeIn(2000);
Hi gladly I want to add a task row after I have clicked the save button. However what I have tried didn't seem to work unfortunately.
To show you the problem that I have. I will show you through a video where I have recorded myself. Here is the link: https://www.youtube.com/watch?v=d7L75HflxYo&feature=youtu.be
This is what I have tried:
var orderId=$('#id_order').val();
var $table = $('#taskTable');
$table.empty();
loadOrderTable(orderId);
And I have also tried this:
var orderId=$('#id_order').val();
var $table = $('#taskTable');
$table.empty();
//loadOrderTable(orderId);
$table.html(loadOrderTable(orderId));
Both attemps were placed in the body of the click function $('#saveOrder').click(function(e).
Now I will show you there rest of my code, in case if you need it.
$(function(){
$('#saveOrder').click(function(e){
e.preventDefault();
var form = $('#orderForm');
var allInput=form.serialize();
//var allInputJSON = JSON.stringify(allInput);
console.log('form serialize value: '+form.serialize());
//console.log('allInputJSON value: '+allInputJSON);
$.ajax( {
url: absUrl + "/user/orders/update/ordertasks",
data: {'allInput' : allInput},
success: function( response ) {
console.log('response value: '+ response );
//tried this after a user has added a task and that the gets filled with the new added row. But unfortunately it doesn't works.
var orderId=$('#id_order').val();
var $table = $('#taskTable');
$table.empty();
loadOrderTable(orderId);
}
} );
});
//addRowOnTaskTable(6);
var orderId=$('#id_order').val();
loadOrderTable(orderId);
//updateTotal();
//absUrl is declared in user/_layouts/template_head.blade.php
function loadOrderTable(order_id){
var order_id=order_id;
$.ajax({
url: absUrl+"/user/orders/load/tasks",
data: {'order_id' : order_id}
}).done(function(data) {
var data = $.parseJSON(data);
console.log('result loading table');
console.log(JSON.stringify(data));
$.each(data, function(index, value) {
$('#taskTable').append(
'<tr>'+
'<td>'
+value.task_name+
'</td>'+
'<td>'
+value.task_hour+
'</td>'+
'<td>'+ //pak load id ordertask ipv load hour voor je backend
'<input type="text" class="form-control hour" id="hour'+value.id+'" name="load_hour[]" value='+value.hour+' data-row='+value.id+' style="max-width:50%" placeholder="">'+
'</td>'+
'<td>'+
'<input type="text" class="form-control hour_salary" id="hour_salary'+value.id+'" name="load_hour_salaries[]" value='+value.hourprice+' data-row='+value.id+' style="max-width:50%" placeholder="">'+
'</td>'+
'<td>'+
'<input type="text" class="form-control" id="total_salary'+value.id+'" name="load_total_salaries[]" value='+value.totalprice+' readonly style="max-width:50%" placeholder="">'+
'</td>'+
'<td>'+
'<div class="dropdown">'+
'<button type="button" class="btn btn-danger dropdown-toggle selDelete" data-toggle="dropdown">'+
'<input id="check1" name="checkbox[]" type="checkbox" class="check" >'+
'<span class="caret-hover caret"></span>'+
'</button>'+
' <input type="hidden" name="load_id_task[]" value="'+value.id_task+'"/>'+
' <input type="hidden" name="load_id_ordertask[]" value="'+value.id+'"/>'+
'<ul class="dropdown-menu" aria-labelledby="selDelete" role="menu">'+
'<li><a class="deleteOrdertask" id="deleteOrdertask' + value.id + '" value="deleteOrdertask' + value.id + '" data-row='+value.id+' href= "#" data-method="delete" >Delete</a></li>'+
'</ul>'+
'</div>'
+'</td>'+
'</tr>');
});
$('.deleteOrdertask').click(function(e){
e.preventDefault();
var $this = $(this);
var rowId = $this.data('row');
deleteOtRow( rowId );
});
var deleteOtRow = function(rowId){
$deleteOrdertask = $("#deleteOrdertask" + rowId);
$($deleteOrdertask).parents('tr').remove();
var temp = $('#delete_ordertasks').val();
$('#delete_ordertasks').val(temp + rowId + ",");
//$(this).parents('tr').remove();
};
var updateTotal = function(rowId){
var rowId = rowId,
$hour_salary = $("#hour_salary" + rowId),
$total_salary = $("#total_salary" + rowId);
var hour = parseFloat($("#hour" + rowId).val()),
hour_salary = parseFloat($hour_salary.val());
if ( hour_salary.length > 0 )
$total_salary.val("0");
else
$total_salary.val( hour_salary * hour );
};
//updates elke totaal veld zonder dat een user een knop heeft ingedrukt.
$('.hour_salary').each(function() {
var $this = $(this);
updateTotal($this.data('row'));
});
$(".hour_salary").keyup(function() {
console.log('test keyup ');
var $this = $(this);
var rowId = $this.data('row');
$this.val( $this.val().replace(/\D/g,'') );
updateTotal( rowId );
});
$(".hour").keyup(function() {
var $this = $(this);
var rowId = $this.data('row');
$this.val( $this.val().replace(/\D/g,'') );
updateTotal( rowId );
});
});
}
function addRowOnTaskTable( id_task ){
var id_task=id_task;
console.log('addrow id '+ id_task);
$.ajax({
url: absUrl+"/user/orders/post/task",
data: {'id_task' : id_task}
}).done(function(data) {
var data = $.parseJSON(data);
console.log('add row JSON stringify'+JSON.stringify(data));
$('#taskTable').append(
'<tr>'+
'<td>'
+data.task_name+
'</td>'+
'<td>'
+data.task_hour+
'</td>'+
'<td>'+
'<input type="text" class="form-control hour" value="" data-row="'+data.id+'" name="hour[]" style="max-width:50%" placeholder="">'+
'</td>'+
'<td>'+
'<input type="text" class="form-control hour_salary" value="" data-row='+data.id+' name="hour_salary[]" style="max-width:50%" placeholder="">'+
'</td>'+
'<td>'+
'<input type="text" class="form-control" name="total_salary[]" value="" readonly style="max-width:50%" placeholder="">'+
'</td>'+
'<td>'+
'<div class="dropdown">'+
'<button type="button" class="btn btn-danger dropdown-toggle selDelete" data-toggle="dropdown">'+
'<input id="check1" name="checkbox[]" type="checkbox" class="check" >'+
'<span class="caret-hover caret"></span>'+
'</button>'+
' <input type="hidden" name="id_task[]" value="'+data.id+'"/>'+
' <input type="hidden" name="id_ordertask[]" value=""/>'+
' <input type="hidden" name="id_task[]" value="'+data.id+'"/>'+
'<ul class="dropdown-menu" aria-labelledby="selDelete" role="menu">'+
'<li><a class="deleteOrdertask' + data.id + '" href= "'+absUrl+"/user/orders/delete/ordertask"+'" data-method="delete" >Delete</a></li>'+
'</ul>'+
'</div>'
+'</td>'+
'</tr>');
$('.deleteOrdertask' + data.id ).click(function(e){
e.preventDefault();
$(this).parents('tr').remove();
});
var updateTotal = function(rowId){
var rowId = rowId,
$hour_salary = $("#hour_salary" + rowId),
$total_salary = $("#total_salary" + rowId);
var hour = parseFloat($("#hour" + rowId).val()),
hour_salary = parseFloat($hour_salary.val());
if ( hour_salary.length > 0 )
$total_salary.val("0");
else
console.log('tot ja '+ hour_salary * hour);
$total_salary.val( hour_salary * hour );
};
$(".hour_salary").keyup(function() {
console.log('test keyup ');
var $this = $(this);
var rowId = $this.data('row');
$this.val( $this.val().replace(/\D/g,'') );
updateTotal( rowId );
});
$(".hour").keyup(function() {
var $this = $(this);
var rowId = $this.data('row');
$this.val( $this.val().replace(/\D/g,'') );
updateTotal( rowId );
});
});
}
});