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);
Related
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'm trying to get input values from below table but all I was getting undefined in console.
Below is HTML table
I add more rows dynamically.
<table id="t_payment_details" class="table" style="margin-left:15px;width:50%;">
<tbody>
<tr id="tr_payment_details" class="tr_payment_details">
<td>Bank Account</td>
<td><input type="text" style="width:160px;" class="form-control" name="bank_account[]" class="bank_account"></td>
<td>Reference Number</td>
<td><input type="text" style="width:160px;" class="form-control" name="payment_ref[]" class="payment_ref"></input></td>
<td>Received Amount</td>
<td><input type="text" style="width:100px;" class="form-control" name="received_amount[]" class="received_amount"></input></td>
<td>Received Date</td>
<td><input type="date" class="form-control" style="width:160px;" onchange='addRowToPaymentTable()' name="received_date[]" class="received_date"></input></td>
</tr>
</tbody>
</table>
Here is JQuery
$("tr.tr_payment_details").each(function() {
var bank_account=$(this).find("input.bank_account").val();
var payment_ref=$(this).find("input.payment_ref").val();
var received_amount=$(this).find("input.received_amount").val();
var received_date=$(this).find("input.received_date").val();
});
This is embarrassing. I didn't notice second class attribute in my input fields.
It was resolved after I merged both class attributes.
Sorry.
I have a table that take inputs and creates item names and descriptions based on the inputs. Is it possible using Javascript to filter a table that picks up inputs as data? i've found a lot of functioning filters but none seem to work with input cells
i've created a basic version of my table and added a jQuery filter i'm trying to use. As you can see the filter isn't functioning properly with the cell inputs - It also won't remove the filter once you've inputted into the search cell once. i've kept the function that creates new rows as i feel this might be causing problems as well.
function cloneRow() {
var rowAmmount = document.getElementById("rowAmmount").value;
var getTotalRows = $('table > tbody').children().length;
for (var i = -1; i < rowAmmount-1;i++) {
var row = document.getElementById("row"); // find row to copy
var table = document.getElementById("table"); // find table to append to
var clone = row.cloneNode(true); // copy children too
clone.id = "newRow" + (getTotalRows + i); // change id or other attributes/contents
clone.classList.remove('hidden');
table.appendChild(clone); // add new row to end of table
$('#newRow' + (getTotalRows + i)).children().each(function() {
$(this).children().attr('id', $(this).children().attr('id') + (getTotalRows + i));
});
}
}
var $rows = $('#table tr');
$('#search').keyup(function() {
var val = '^(?=.*\\b'
+ $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b')
+ ').*$',
reg = RegExp(val, 'i'),
text;
$rows.show().filter(function() {
text = $(this).text().replace(/\s+/g, ' ');
return !reg.test(text);
}).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="rowAmmount"/>
<button id="add" onclick="cloneRow()">New Row</button>
<button type="button" onclick="submit()">Submit</button>
<select id="select">
<option value="html">HTML</option>
<option value="packlist">Packlist</option>
</select>
<<input type="text" id="search" placeholder="Type to search">
<table>
<thead>
<tr>
<th>No.</th>
<th>Product Code</th>
<th>Item Name</th>
<th>Long Description</th>
<th>Material</th>
<th>Material Position</th>
<th>Style</th>
<th>Colour</th>
<th>Dimensions</th>
<th>Image</th>
<th>Item Name</th>
<th>Packlist</tr>
</thead>
<tbody id="table">
<tr id="row">
<td id="no"></td>
<td><input id="productId" placeholder="Input"></td>
<td><input id="itemname" placeholder="Input"></td>
<td><input id="long" placeholder="Input"></td>
<td><input id="fabric" placeholder="Input"></td>
<td><input id="fabricInput" placeholder="Input 'Yes' 'No' or 'Number'"></td>
<td><input id="style" placeholder="Input"></td>
<td><input id="colour" placeholder="Input"></td>
<td><input id="dimensions" placeholder="Input"></td>
<td ><img id="image" src=""></output></td>
<td ><output id="name"></output></td>
<td><output id="description"></output></td>
</tr>
<tr id= "newRow0">
<td id="no0"></td>
<td><input id="productId0" placeholder="Input"></td>
<td><input id="itemname0" placeholder="Input"></td>
<td><input id="long0" placeholder="Input"></td>
<td><input id="fabric0" placeholder="Input"></td>
<td><input id="fabricInput0" placeholder="Input 'Yes' 'No' or 'Number'"></td>
<td><input id="style0" placeholder="Input"></td>
<td><input id="colour0" placeholder="Input"></td>
<td><input s id="dimensions0" placeholder="Input"></td>
<td ><img id="image0" src=""></output></td>
<td ><output id="name0"></output></td>
<td><output id="description0"></output></td>
</tr>
</tbody>
</table>
First, your HTML is a bit sloppy: I had to change <<input ... to <input ....
And some <img> were followed by </output>
The main issue is that you are using .text() on the table rows, but instead you should be using .val() on the inputs inside the rows.
Also I used a simple indexOf() to eliminate the risk of the regex being wrong.
Working demo (stripped most of the redundant or unneeded elements):
var $rows = $('#table tr');
$('#search').keyup(function() {
var searchText = $(this).val();
$rows
.show()
.filter(function() {
var $inputs = $(this).find("input:text");
var found = searchText.length == 0; // for empty search, show all rows
for (var i=0; i < $inputs.length && !found; i++) {
var text = $inputs.eq(i).val().replace(/\s+/g, ' ');
found = text.length > 0 && text.indexOf(searchText) >= 0;
}
return !found;
})
.hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="search" placeholder="Type to search">
<table>
<thead>
<tr>
<th>Product Code</th>
<th>Item Name</th>
<th>Long Description</th>
</thead>
<tbody id="table">
<tr id="row">
<td><input id="productId" placeholder="Input"></td>
<td><input id="itemname" placeholder="Input"></td>
<td><input id="long" placeholder="Input"></td>
</tr>
<tr id="newRow0">
<td><input id="productId0" placeholder="Input"></td>
<td><input id="itemname0" placeholder="Input"></td>
<td><input id="long0" placeholder="Input"></td>
</tr>
</tbody>
</table>
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 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));
});
});