Hello I have a pop up view where i fetch the data and put it in a table like the image below.
the are values in QTY Field .The main task is that when i edit the QTY input text for example I make this 200 then after this there will be a new column added next to that column and will hold the remaining value .for example Initial 500 ,change to 200 then the next column will show(500-200)=300 ,and it will continue as i keep changing like below image .I trying to make something like the below one.
I am using blur event but the new column is creating at last not after the changing column and can't calculate the values.like i show in second image
my sample code is something like below
<table border="1" cellspacing="0">
<tr>
<th><input class='check_all' type='checkbox' onclick="select_all()"/></th>
<th>S. No</th>
<th>First Name</th>
<th>Last Name</th>
<th>Tamil</th>
<th>English</th>
<th>Computer</th>
<th>Total</th>
</tr>
<tr>
<td><input type='checkbox' class='case'/></td>
<td>1.</td>
<td><input type='text' id='first_name' name='first_name[]'/></td>
<td><input type='text' id='last_name' name='last_name[]'/></td>
<td><input type='text' id='tamil' name='tamil[]'/></td>
<td><input type='text' id='english' name='english[]'/> </td>
<td><input type='text' id='computer' name='computer[]'/></td>
<td><input type='text' id='total' name='total[]'/> </td>
</tr>
</table>
<button type="button" class='delete'>- Delete</button>
<button type="button" class='addmore'>+ Add More</button>
<p>
<input type='submit' name='submit' value='submit' class='but'/></p>
****Javascript code**
var i=2;
$("#last_name").blur(function(){
var data="<tr><td><input type='checkbox' class='case'/></td><td>"+i+".
</td>";
data +="<td><input type='text' id='first_name"+i+"'
name='first_name[]'/></td> <td><input type='text' id='last_name"+i+"'
name='last_name[]'/></td><td><input type='text' id='tamil"+i+"'
name='tamil[]'/></td><td><input type='text' id='english"+i+"'
name='english[]'/></td><td><input type='text' id='computer"+i+"'
name='computer[]'/></td><td><input type='text' id='total"+i+"'
name='total[]'/></td></tr>";
$('table').append(data);
i++;
})
I Hope I make my question clear by the images help needed .Thanks
To append after row replace $('table').append(data) whith
$(data).insertAfter as demo below
var i=2;
var addRow = function(){
var data="<tr><td><input type='checkbox' class='case'/></td><td>"+i+". </td>";
data +="<td><input type='text' name='first_name[]'/></td> <td><input type='text' name='last_name[]'/></td><td><input type='text' name='tamil[]'/></td><td><input type='text' name='english[]'/></td><td><input type='text' name='computer[]'/></td><td><input type='text' name='total[]'/></td></tr>";
$(data).insertAfter($(this).closest('tr'))
i++;
}
$(document).on('blur', 'input[name="last_name[]"]', addRow)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" cellspacing="0">
<tr>
<th><input class='check_all' type='checkbox' onclick="select_all()"/></th>
<th>S. No</th>
<th>First Name</th>
<th>Last Name</th>
<th>Tamil</th>
<th>English</th>
<th>Computer</th>
<th>Total</th>
</tr>
<tr>
<td><input type='checkbox' class='case'/></td>
<td>1.</td>
<td><input type='text' name='first_name[]'/></td>
<td><input type='text' name='last_name[]'/></td>
<td><input type='text' name='tamil[]'/></td>
<td><input type='text' name='english[]'/> </td>
<td><input type='text' name='computer[]'/></td>
<td><input type='text' name='total[]'/> </td>
</tr>
</table>
<button type="button" class='delete'>- Delete</button>
<button type="button" class='addmore'>+ Add More</button>
<p>
<input type='submit' name='submit' value='submit' class='but'/></p>
())
To calculate the diff you have to use the onchange event on first row to keep the original value (before change). Than on blur, when adding row, compute the difference beetwhen original saved value and actual value
Related
I have make a managment system in which i m making sales page. I make all the fields. Now after entering the items, I want the management system to show me total of all and when i add paid money it show me left amount from total. Html Code is below
<table class="table table-bordered table-striped">
<thead>
<th>#</th>
<th>Item Name</th>
<th>Batch No</th>
<th>Remarks</th>
<th>Quantity</th>
<th>Cost Per Piece</th>
<th>Total</th>
<th>Action</th>
</thead>
<tbody id="tbody">
</tbody>
<center><button type="button" name="" onclick="additem()" class="btn btn-success"> Add</button></center></td>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><h3 style="color:red;">Total Amount</td>
<td><input type="number" id="totalamount" class="form-control" name="text" readonly /></td>
<tr>
<td></td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><h3 style="color:red;">Paid</td>
<td><input type="number" name="paid" id="total10" oninput="calculateTotal()" class="form-control" /></td>
</tr>
<tr>
<td></td>
<td> </td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><h3 style="color:red;">G.T.Balance</td>
<td><input type="number" name="" id="gtotal" class="form-control" readonly /></td>
</tr>
</table>
Now the jquery code is
<script type="text/javascript">
let x = 0;
function additem() {
x++;
var html=`<tr;
<td><center>${x}</center></td>
<td><input type='text' class='form-control' name='product_name[]' required></td>
<td><input type='text' class='form-control' name='batch_no[]' required></td>
<td><input type='text' class='form-control' name='remarks[]' required></td>
<td><input id='qty${x}' type='number' class='form-control' oninput='calculate(${x})' name='total_qty[]' required></td>
<td><input id='cost${x}' type='number' class='form-control' oninput='calculate(${x})'name='cost[]' required></td>
<td><input type='number' class='form-control' id='total${x}' name='total[]' readonly required></td>
<td><button type='button' id='btn' class='btn btn-danger'><i class='fa fa-remove'></i></button></td>
</tr>`;
document.getElementById("tbody").insertRow().innerHTML= html;
}
function calculate(x) {
const qty = document.getElementById(`qty${x}`).value;
const cost = document.getElementById(`cost${x}`).value;
const totalElem = document.getElementById(`total${x}`);
totalElem.value = qty * cost
calculateTotal()
}
function calculateTotal() {
let fields = document.getElementsByName('total')
let total = 0
fields.forEach(f => {
total = total + parseInt(f.value)
})
document.getElementById('totalamount').value = total
let paid = document.getElementById('total10').value || 0 // If you change the id of the "paid" field, change it here too.
let subtotal = total - parseInt(paid)
document.getElementById('gtotal').value = subtotal
}
$(document).on('click',"#btn", function(e)
{
var r = $(this).closest('tr').remove();
x=0;
});
</script>
I have make a function name calculate total before it return me right value now it is returning me 0. Please kindly help me
Changes in var html variable:
From: name='total[]'
To: name='total'
Note: You must not be mixing JS and HTML together. There are also issues with your HTML table.
var html=`<tr>
<td><center>${x}</center></td>
<td><input type='text' class='form-control' name='product_name[]' required></td>
<td><input type='text' class='form-control' name='batch_no[]' required></td>
<td><input type='text' class='form-control' name='remarks[]' required></td>
<td><input id='qty${x}' type='number' class='form-control' oninput='calculate(${x})' name='total_qty[]' required></td>
<td><input id='cost${x}' type='number' class='form-control' oninput='calculate(${x})'name='cost[]' required></td>
<td><input type='number' class='form-control' id='total${x}' name='total' readonly required></td>
<td><button type='button' id='btn' class='btn btn-danger'><i class='fa fa-remove'></i></button></td>
</tr>`;
I have the following table structure
<form method=POST class='form leftLabels'>
<table >
<tr >
<th >Code:</th>
<td ><input type='text' name='f[id]' size='60' value='10' /></td>
</tr>
<tr ><th >Name:</th>
<td ><input type='text' name='f[name]' size='60' value='Aa' /></td>
</tr>
// <<<< Here I would like to add a row
<tr >
<td class=' nogrid buttonsClass'><button type=submit>Save</button>
</td>
</tr>
</table>
</form>
The row that I am trying to add should have the following html:
<tr>
<th> Delete the record?</th>
<td><input type='checbox' name='delete' value=1></td>
</tr>
I have the following Javascript / jQuery code:
var trCnt=0;
$('table tr').each(function(){
trCnt++;
});
rowToInsertCheckbox = trCnt - 1;
$('table').after(rowToInsertCheckbox).append(
$(document.createElement('tr')),
$(document.createElement('td').html('Delete the record'),
$(document.createElement('td').html('Checkbox here?')),
);
which does find the right row after which the insert should be done, but the code does not work.
after() adds the new content after the target element, but outside it. tr need to be inside the table. In addition you need to append the td to the tr, not the table.
To place the new tr in your target position you can select the last tr in the table and use insertBefore(), like this:
let $newRow = $('<tr />').insertBefore('table tr:last');
$('<td>Delete the record?</td>').appendTo($newRow);
$('<td><input type="checkbox" name="delete" value="1"></td>').appendTo($newRow);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" class="form leftLabels">
<table>
<tr>
<th>Code:</th>
<td><input type="text" name="f[id]" size="60" value="10" /></td>
</tr>
<tr>
<th>Name:</th>
<td><input type="text" name="f[name]" size="60" value="Aa" /></td>
</tr>
<tr>
<td class="nogrid buttonsClass"><button type="submit">Save</button></td>
</tr>
</table>
</form>
One way to locate the row after which the content should be added is:
var tr = $("th").filter(function () {
return $(this).text() == "Name:";
}).closest("tr");
Then add the row:
$(tr).after("<tr><th> Delete the record?</th><td><input type='checkbox' name='delete' value=1></td></tr>");
$(document).ready(function() {
var tr = $("th").filter(function() {
return $(this).text() == "Name:";
}).closest("tr");
$(tr).after("<tr><th>Delete the record?</th>" +
"<td><input type='checkbox' name='delete' value=1></td>" +
"</tr>");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method=POST class='form leftLabels'>
<table>
<tr>
<th>Code:</th>
<td><input type='text' name='f[id]' size='60' value='10' /></td>
</tr>
<tr>
<th>Name:</th>
<td><input type='text' name='f[name]' size='60' value='Aa' /></td>
</tr>
<tr>
<td class=' nogrid buttonsClass'><button type=submit>Save</button>
</td>
</tr>
</table>
</form>
I output a table when the user selects something. I have a button that will allow the user to append an empty table row to the end of the table but I can't seem to get it working properly.
HTML generation code in PHP:
echo<table>
"<table id='roof-component-data-table'><tbody>
<tr>
<th>Roof Component</th>
<th>Delete</th>
</tr>";tr>
<tr id="roofComponentRow" style="display: none;">
//empty row used to clone<td><input type="text" id="roof-component-name" name="roof-component-name[]" value="" <="" td=""></td>
echo</tr>
"<tr id='roofComponentRow' style='display: none;'>"; <tr id="roofComponentRow0">
echo "<td><input type='text' id='roof <td><input type="text" id="roof-component-name'name" name='roofname="roof-component-name[]'name[]" value=''<value="Air Film" <="" td=""></td>";td>
echo "< <td><a href="#" class="removeRoofComponentRow" onclick="removeRoofComponent("Air Film")">Delete</tr>";a></td>
</tr>
while<tr ($roofComponentsRowid="roofComponentRow1">
= mysqli_fetch_array($roofComponentsData)) { <td><input type="text" id="roof-component-name" name="roof-component-name[]" value="Surfacing" <="" td=""></td>
echo<td><a "<trhref="#" id='roofComponentRow".class="removeRoofComponentRow" $ComponentRowCounteronclick="removeRoofComponent("Surfacing")">Delete</a></td>
."'>"; </tr>
<tr id="roofComponentRow2">
echo "<td><input type='text' id='roof <td><input type="text" id="roof-component-name'name" name='roofname="roof-component-name[]'name[]" value='".value="Membranes" $roofComponentsRow['roof_component_name']<="" ."'<td=""></td>";td>
echo "<td><a<td>Delete</td>";td>
</tr>
echo<tr "<id="roofComponentRow3">
<td><input type="text" id="roof-component-name" name="roof-component-name[]" value="Overlay Boards" <="" td=""></tr>";td>
<td>Delete</td>
</tr>
$ComponentRowCounter++; <tr id="roofComponentRow4">
} <td><input type="text" id="roof-component-name" name="roof-component-name[]" value="Insulation" <="" td=""></td>
echo "< <td><a href="#" class="removeRoofComponentRow" onclick="removeRoofComponent("Insulation")">Delete</table>";a></td>
</tr>
echo"<input type='button' value='+' id='addRoofComponentRow' class='addRoofComponentRow'</>";tbody>
</table>
<input type="button" value="+" id="addRoofComponentRow" class="addRoofComponentRow">
This is what my table looks like:
<table>
<tbody>
<tr>
<th>Roof Component</th>
<th>Delete</th>
</tr>
<tr id="roofComponentRow" style="display: none;">
<td><input type="text" id="roof-component-name" name="roof-component-name[]" value="" <="" td=""></td>
</tr>
<tr id="roofComponentRow0">
<td><input type="text" id="roof-component-name" name="roof-component-name[]" value="Air Film" <="" td=""></td>
<td>Delete</td>
</tr>
<tr id="roofComponentRow1">
<td><input type="text" id="roof-component-name" name="roof-component-name[]" value="Surfacing" <="" td=""></td>
<td>Delete</td>
</tr>
<tr id="roofComponentRow2">
<td><input type="text" id="roof-component-name" name="roof-component-name[]" value="Membranes" <="" td=""></td>
<td>Delete</td>
</tr>
<tr id="roofComponentRow3">
<td><input type="text" id="roof-component-name" name="roof-component-name[]" value="Overlay Boards" <="" td=""></td>
<td>Delete</td>
</tr>
<tr id="roofComponentRow4">
<td><input type="text" id="roof-component-name" name="roof-component-name[]" value="Insulation" <="" td=""></td>
<td>Delete</td>
</tr>
</tbody>
</table>
<input type="button" value="+" id="addRoofComponentRow" class="addRoofComponentRow">
Now when the user clicks the + button it will fire off some JS that should clone my empty row and append it to the end of the table.
Here is how I am attempting to do that:
$(function() {
var $removeIDValue = 0;
$(document.body).on('click', '.addRoofComponentRow', function () {
var $emptyRoofComponentRow = $("#roofComponentRow").clone();
$removeIDValue++
var $emptyRoofComponentRowClone = $emptyRoofComponentRow.clone();
var $newRowID = 'added_roof_component_row' + $removeIDValue;
$emptyRoofComponentRowClone.attr('id', $newRowID)
$emptyRoofComponentRowClone.children('td').last().after('<td>Delete</td>');
$('#roof-component-data-table').append($emptyRoofComponentRowClone);
$emptyRoofComponentRowClone.show();
});
});
When I click the button nothing is happening at all, I see nothing being added onto the table and I am getting no console errors at all. I also set an alert with that function to see if the function was even firing and my alert message did get displayed.
JSFiddle
Where am I going wrong here?
youre not appending it to anything
add <tbody id="roof-component-data-table">
https://jsfiddle.net/dr1g02go/5/
The function will work alright I guess, only there are three issues here:
the table that is selected cannot be selected, since the rendered table has no id. This is the biggest problem with this code.
echo "<td><input type='text' id='roof-component-name' name='roof-component-name[]' value=''</td>"; In this line the input isn't closed resulting in badly formed HTML.
In the HTML generation the delete link doesn't has escaped quotes, generating script errors.
Working fiddle: https://jsfiddle.net/dr1g02go/4/
I have a table and on button click i am adding row using .clone and adding id using .prop now What i want to do is i want to find text boxes with in tr and change ids for it How can i do it
Here is My html
<table class="table purchasemanagement customtabl-bordered " id="tblpurchaseproductdes">
<thead>
<tr>
<th><input type="checkbox" onclick="select_all()" class="check_all"></th>
<th>Product Description*</th>
<th>No's*</th>
<span class="error" id="purchse_no" style="color:red"></span>
<th>Capacity*</th>
<span class="error" id="purchse_errorcapacity" style="color:red"></span>
<th>Quantity</th>
<th>Full/Empty</th>
</tr>
</thead>
<tbody id="puchasedescbody">
<tr class="purchaserow">
<td><input class="case" type="checkbox"></td>
<td>
<select class='form-control drpdwn_pdtdescription' id='drpdwn_pdtdescription' name='pdtdescription'></select>
</td>
<td><input class='form-control pdtdesc_nos' id="no_1" name='nos' /></td>
<td><input class='form-control pdtdesc_capacity' id="capacity_1" name='capacity' /></td>
<td><input class='form-control pdtdesc_qty' id="quantity_1" name='quantity' readonly /></td>
<td><input class='case1 pdtdesc_full' type='checkbox' name='full' checked='checked'></td>
</tr>
</tbody>
</table>
js
$(".purchasemore").on('click', function() {
var cloneCount = 1;
// var row = $(".purchasemanagement tr:last").clone().find(':input').val('').end();
var row = $(".purchasemanagement tr:last").clone().prop('id', 'klon' + cloneCount);
// var test = $(this).find('input[name$="nos"]').attr("id");
// alert(test);
$('.purchasemanagement').append(row);
});
For my code It is Adding id for tr
i want to change id for nos,capacity
Thanks
In your commented code you need to access those elements using :
row.find('.pdtdesc_capacity').attr('id','capacity_' + cloneCount);
I am trying to get the id of the next input field when user exit the input field:
$("input").blur(function(){
var theid = $(this).attr('id');
var thefield = $(this).nextAll('input').first().attr('id');
alert(thefield);
});
Currently it returns undefined.
The HTML code is:
<table><tr>
<td>Number</td><td>Name</td>
<tr><td>1 <input type='text' name='deltagernummer[]' value='' size='6' id='r0' tabindex='1' /></td>
<td><input type='text' name='deltagernavn[]' value='' id='rr0' tabindex='-1' /></td></tr>
<tr><td>2 <input type='text' name='deltagernummer[]' value='' size='6' id='r1' tabindex='2' /></td>
<td><input type='text' name='deltagernavn[]' value='' id='rr1' tabindex='-1' /></td></tr>
</table>
What is the problem?
$("input").blur(function() {
var theid = $(this).attr('id');
var thefield = $(this).nextAll('input').first().attr('id');
alert(thefield);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>Number</td>
<td>Name</td>
<tr>
<td>1 <input type='text' name='deltagernummer[]' value='' size='6' id='r0' tabindex='1' /></td>
<td><input type='text' name='deltagernavn[]' value='' id='rr0' tabindex='-1' /></td>
</tr>
<tr>
<td>2 <input type='text' name='deltagernummer[]' value='' size='6' id='r1' tabindex='2' /></td>
<td><input type='text' name='deltagernavn[]' value='' id='rr1' tabindex='-1' /></td>
</tr>
</table>
.nextAll() scans for siblings. Although your <input>s are in the same level, they're not siblings. To "visualize", here's pseudo-HTML:
Child and child's sibling:
<parent>
<child>
<childs-sibling>
</parent>
Your case:
<parent>
<descendant>
<input>
</descendant>
<descendant-sibling>
<totally-unrelated-to-input>
</descendant-sibling>
</parent>
What you can do is climb up to the <tr> level, succeeding rows, get all inputs, get the first one and then get the id.
var id = $(this)
.closest('tr') // Get to the row level
.nextAll('tr') // Get all succeeding rows
.find('td > input') // Find the inputs. You may adjust the selector.
.eq(0) // Get the first input
.attr('id'); // Get its id, if any
Nextall() goes through siblings, your inputs have no siblings.
$("input").blur(function(){
var theid = $(this).attr('id');
var thefield = $(this).closest('tr').next().find('input').attr('id');
alert(thefield);
});
$("input").blur(function() {
var theid = $(this).attr('id');
var thefield = $(this).closest('tr').next().find('input').attr('id');
alert(thefield);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>Number</td>
<td>Name</td>
<tr>
<td>1 <input type='text' name='deltagernummer[]' value='' size='6' id='r0' tabindex='1' /></td>
<td><input type='text' name='deltagernavn[]' value='' id='rr0' tabindex='-1' /></td>
</tr>
<tr>
<td>2 <input type='text' name='deltagernummer[]' value='' size='6' id='r1' tabindex='2' /></td>
<td><input type='text' name='deltagernavn[]' value='' id='rr1' tabindex='-1' /></td>
</tr>
</table>