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>
Related
I have a table in in that table I have a button for adding new row .In that table I want to dynamically add new row when user will click the add row button. I but it is not working. The HTML and JQuery code is there in JSFiddle . Please suggest.
<table id="myTable" border="1">
<tr>
#*<td>SR</td>*#
<td>Name</td>
<td>Age</td>
<td>Delete?</td>
<td>Add</td>
</tr>
<tr>
#*<td>1</td>*#
<td><input size=25 type="text" id="nmbox" /></td>
<td><input size=25 type="text" id="agbox" /></td>
<td><input type="button" id="delRow" value="Delete" onclick="deleteRow(this)" /></td>
<td><input type="button" id="addRow" value="Add " onclick="insRow()" /></td>
</tr>
</table>
var new_row1 = $('#mytable tr:last').clone();
$('#mytable').append(new_row1);
1) id selector mismatched $('#myTable tr:last'). caps T
2) id should be unique for each element .
function insRow(){
var new_row1 = $('#myTable tr:last').clone();
$('#myTable').append(new_row1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" border="1">
<tr>
#*<td>SR</td>*#
<td>Name</td>
<td>Age</td>
<td>Delete?</td>
<td>Add</td>
</tr>
<tr>
#*<td>1</td>*#
<td><input size=25 type="text" /></td>
<td><input size=25 type="text" /></td>
<td><input type="button" value="Delete" onclick="deleteRow(this)" /></td>
<td><input type="button" value="Add " onclick="insRow()" /></td>
</tr>
</table>
To add child elements into cloned one without jQuery:
clone = ElementTo.cloneNode();
while (ElementToBeCloned.firstChild){
clone.appendChild(ElementToBeCloned.lastChild);
}
So I have this table.
<table id="mytable">
<tr>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<td><input type="text"/></td>
<td><input type="text"/></td>
<td><input type="checkbox"/></td>
</tr>
</table>
Now, I want to extract the user input from second text field but for only those rows which have checkbox checked. I am able to select and print the checkboxes that are checked using this jQuery code.
var x = $('#mytable td input:checked');
$.each(x, function(key, value) {
console.log(value)
});
I am not sure how to get the input field data from this object, I have tried using .children() but that resulted in error.I have very basic knowledge of jQuery. Please help.
You can find the tr with checked inputs then find the input in its second td like
$('button').click(function() {
$('#mytable tr:has(input:checked) td:nth-child(2) input').each(function() {
snippet.log(this.value)
});
})
<script src="https://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="checkbox" />
</td>
</tr>
</table>
<button>Print</button>
You can also use has selector
$('#mytable td:has(input:checked)').find( "input[type='text']:last" ).each( function(){
console.log($(this).val());
} );
Or may be simply prev() of parent() has mentioned above
$('#mytable td input:checked').each(function() {
console.log($(this).parent().prev().find("input").val());
});
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 have a small question and I hope someone can help me with it :D
I’m trying to create a product table, in which a user just add the quantity of a product and the jquery makes the multiplication to its value and gives the result
I already made this, and it works well:
<script>
$(document).ready(function(){
$('#quantity_1').keyup(function(){
var price_1 = $("#price_1").val();
var quantity_1 = $("#quantity_1").val();
quantity_1 = quantity_1.replace(/[^0-9]+/g, '');
$("#quantity_1").val(quantity_1);
var total_1 = price_1 * quantity_1;
$( "#total_1" ).val( total_1.toFixed(2) );
});
});
</script>
<table border="1" cellpadding="5px" cellspacing="0" >
<tr>
<td>Product</td>
<td>Price</td>
<td>Quantity</td>
<td>Total</td>
</tr>
<tr>
<td>Product Name</td>
<td><input type="hidden" name="product[1][price]" id="price_1" value="10.00" />10.00</td>
<td><input type="text" name="product[1][quantity]" id="quantity_1" /></td>
<td><input type="text" name="product[1][total]" id="total_1" value="0" /></td>
</tr>
</table>
Working demo here:
http://jsfiddle.net/EnterateNorte/9kswL0gf/
But I would like to be able to add more than one line, like so:
<table border="1" cellpadding="5px" cellspacing="0" >
<tr>
<td>Product</td>
<td>Price</td>
<td>Quantity</td>
<td>Total</td>
</tr>
<tr>
<td>Name 1</td>
<td><input type="hidden" name="product[1][price]" id="price_1" value="10.00" />10.00</td>
<td><input type="text" name="product[1][quantity]" id="quantity_1" /></td>
<td><input type="text" name="product[1][total]" id="total_1" value="0" /></td>
</tr>
<tr>
<td>Name 5</td>
<td><input type="hidden" name="product[5][price]" id="price_5" value="10.00" />23.00</td>
<td><input type="text" name="product[5][quantity]" id="quantity_5" /></td>
<td><input type="text" name="product[5][total]" id="total_5" value="0" /></td>
</tr>
<tr>
<td>Name 3</td>
<td><input type="hidden" name="product[3][price]" id="price_3" value="130.00" />10.00</td>
<td><input type="text" name="product[3][quantity]" id="quantity_3" /></td>
<td><input type="text" name="product[3][total]" id="total_3" value="0" /></td>
</tr>
<tr>
<td>Name 4</td>
<td><input type="hidden" name="product[4][price]" id="price_4" value="12.00" />10.00</td>
<td><input type="text" name="product[4][quantity]" id="quantity_4" /></td>
<td><input type="text" name="product[4][total]" id="total_4" value="0" /></td>
</tr>
</table>
And if it isn’t to much trouble, I would be awesome if it would SUM all the totals and show a gran total at the end of the table :)
Use:
$(document).ready(function(){
$('[name*=quantity]').keyup(function(){
var price = $(this).parent().prev().find('input').val();
var quantity = $(this).val();
var total = price * quantity;
$(this).parent().next().find('input').val( total.toFixed(2) );
});});
Working Demo
Update: For showing Grand Total
var sum = 0;
//iterate through each textboxes and add the values
$('[name*=total]').each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseInt(this.value);
}
});
Working Demo
What you can do is to find the elements using their relative position instead of hard coded ids
$(document).ready(function () {
$('input[id^="quantity_"]').keyup(function () {
var $tr = $(this).closest('tr');
var price = $tr.find('input[id^="price_"]').val();
var quantity = this.value;
var total = (price * quantity) || 0;
$tr.find('input[id^="total_"]').val(total.toFixed(2));
});
});
Demo: Fiddle
I've updated your code in Fiddle. You need to change in your markup a bit.
<tr>
<td>Product Name</td>
<td><input type="hidden" class="price" ... />10</td>
<td><input type="text" class="quantity" ... /></td>
<td><input type="text" class="total" ... /></td>
</tr>
$(document).ready(function(){
$('.quantity').keyup(function(){
var parent = $(this).closest("tr");
var price = $(".price", parent).val();
var quantity = $(".quantity", parent).val();
var total = price * quantity;
$(".total", parent).val(total.toFixed(2));
});
});
I would recommend you to use common class
HTML:
<tr>
<td>Name 5</td>
<td>
<input type="hidden" class="price" value="10.00" />10.00</td>
<td>
<input type="text" class="quantity" />
</td>
<td>
<input type="text" class="total" value="0" />
</td>
</tr>
<tr>
<td>Name 3</td>
<td>
<input type="hidden" class="price" value="130.00" />130.00</td>
<td>
<input type="text" class="quantity" />
</td>
<td>
<input type="text" class="total" value="0" />
</td>
</tr>
Script:
$('.quantity').keyup(function () {
var tr = $(this).closest('tr');
var price = tr.find('.price').val();
var quantity = $(this).val();
var total = price * quantity;
tr.find('.total').val(total.toFixed(2));
});
DEMO
Modify your table:
<table border="1" cellpadding="5px" cellspacing="0" id='table' >
<!-- your rows with inputs -->
<tr>
<td>
<input id='totalSum' value='0' type='text' />
</td>
</tr>
</table>
Make all your 'total' inputs readonly by adding 'readonly' attribute.
js code:
$(document).ready(function(){
$('[name*=quantity]').keyup(function(){
var total = 0;
$('#table tr').each(function(i,item){
var price = parseFloat($(item).find('[name*=price]').val().replace(',','.'));
var quantity = parseInt($(item).find('[name*=quantity]').val());
if(!isNaN(price) && !isNan(quantity)){
total += price*quantity;
}
});
$("#totalSum").val(total.toFixed(2));
});
});