I have a table and a button, when the button is pressed it adds a new input into the table inside a div, when I add the input manually inside the div and test it it works, but when the script adds it it goes outside the table.. why is that? how can i fix this issue?
html:
..
<script> var x=0; </script>
...
<table>
<tr>
<td>From:</td>
<td><input type="text" name="from" /></td>
</tr>
<tr>
<td>To (email):</td>
<td><input type="text" name="to0" /></td>
<td><input type='button' onclick='newMail()' value='Add recipient'/> </td>
</tr>
<div id="add">
<tr>
<td>To (email):</td> <!-- this works -->
<td><input type="text" name="to0" /></td>
</tr>
</div>
<tr>
<td align="center" colspan="2"><input type="submit" value="send"></td>
</tr>
</table>
JS:
function newMail()
{
x=x+1;
var input =
" <tr>"+
" <td>To (email):</td>"+
" <td><input type='text' name='to"+x+"' /></td>"+
" </tr>";
document.getElementById("add").innerHTML += input;
}
the function works and adds the input and everything, but it goes outside the table, whilst the one inside the div that i manually added works fine and is displayed normally.
Try this one: https://jsfiddle.net/0dh52827/
JAVASCRIPT
$( document ).ready(function() {
$("#add_recipient").click( function() {
x = x + 1;
console.log(x);
var input =
" <tr>" +
" <td>To (email):</td>" +
" <td><input type='text' name='to" + x + "' /></td>" +
" </tr>";
$("#add").prepend(input);
});
});
HTML:
<script>
var x = 0;
</script>
<table id="add">
<tr>
<td>From:</td>
<td>
<input type="text" name="from" />
</td>
</tr>
<tr>
<td>To (email):</td>
<td>
<input type="text" name="to0" />
</td>
</tr>
<tr>
<td>To (email):</td>
<!-- this works -->
<td>
<input type="text" name="to0" />
</td>
</tr>
<tr>
<td align="left">
<input type="submit" value="send">
</td>
<td align="right">
<input id="add_recipient" type='button' value='Add recipient' />
</td>
</tr>
JQUERY Prepend is designed for things like this.
Check this please
function newMail() {
x = x + 1;
var input =
" <tr>" +
" <td>To (email):</td>" +
" <td><input type='text' name='to" + x + "' /></td>" +
" </tr>";
document.getElementById("add").innerHTML += input;
}
<script>
var x = 0;
</script>
<table>
<tr>
<td>From:</td>
<td>
<input type="text" name="from" />
</td>
</tr>
<tr>
<td>To (email):</td>
<td>
<input type="text" name="to0" />
</td>
</tr>
<tr>
<td>To (email):</td>
<!-- this works -->
<td>
<input type="text" name="to0" />
</td>
</tr>
<tbody id="add"></tbody>
<tr>
<td align="left">
<input type="submit" value="send">
</td>
<td align="right">
<input type='button' onclick='newMail()' value='Add recipient' />
</td>
</tr>
The element with id="add" is a <div> in a <table> (which is not properly placed but might work in some browsers). Adding code to it has at least an undefined behavior.
You should instead remove the <div> tag and give the <tr> tag the id="add" attribute and then use document.getElementById("add").appendChild() method to add a new html node. To create this node, don't use text but document.createElement() like described in MDN
Related
So I have A Table With Buttons and match information, I am trying to script a code when I click on the specific button, it adds my selections to div(cart) for example if i click on the first button (1.59), it should add the match Name to the cart (Arsenal-Chelsea) ,The related selection (Arsenal) OR Header Name (Home) and The Value (1.59) in this order
Arsenal-Chelsea
Arsenal
1.59
Plus, I need it to be functional whenever I Re-click on the same button (1.59) it should be able to remove the selection from the cart
$(".nr").click(function() {
var $item = $(this).closest("tr").find(".nr").val();
$("#cart").append($item);
$("#cart").append("<div class='cart' Id='cart'>");
});
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script type="text/javscript" src="script.js"></script>
<div class="cart" Id="cart">
<div class="title">Bet Slip</div>
<chr/>
<div id="sel"><span></span></div><br>
<span>Selections:</span><br>
<button class="bet1">Bet</button><br>
</div>
<br>
<table id="choose-address-table" class="ui-widget ui-widget-content" border="1">
<thead>
<tr class="ui-widget-header ">
<th>Match</th>
<th>Home</th>
<th>Draw</th>
<th>Away</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arsenal-Chelsea</td>
<td><input type=button class="nr" value="1.59"></td>
<td><input type=button class="nr" value="3.40"></td>
<td><input type=button class="nr" value="2.90"></td>
</td>
</tr>
<tr>
<td>Man United-Man City</td>
<td><input type=button class="nr" value="2.70"></td>
<td><input type=button class="nr" value="2.90"></td>
<td><input type=button class="nr" value="2.50"></td>
</td>
</tr>
<tr>
<td>Barcelona-Real Madrdid</td>
<td><input type=button class="nr" value="3.60"></td>
<td><input type=button class="nr" value="3.20"></td>
<td><input type=button class="nr" value="1.95"></td>
</td>
</tr>
</tbody>
</table>
You need to use DOM traversal to find the content related to the button which was clicked. To get the venue you can get the index of the containing td and then retrieve the matching thead th which holds the text. To get the match you can get the text of the first td in the current row.
When appending the new content, don't use id attributes as they must be unique.
Also note in the following example that I fixed some of the issues in your HTML, such as extra </td> tags and removing the <chr /> tag, which doesn't exist.
let $th = $('#choose-address-table thead th');
$(".nr").on('click', e => {
let $btn = $(e.target);
let $option = $(`.cart[data-id="${$btn.prop('id')}"]`);
if ($option.length) {
$option.remove();
return;
}
let $tr = $btn.closest('tr');
let selectionIndex = $btn.closest('td').index();
let match = $tr.find('td:first').text().trim();
let result = $th.eq(selectionIndex).text().trim();
let value = $btn.val();
$("#cart").append(`<div class="cart" data-id="${$btn.prop('id')}">${match} ${result} ${value}</div>`);
});
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<div class="cart" Id="cart">
<div class="title">Bet Slip</div>
<div id="sel"><span></span></div><br />
<span>Selections:</span><br />
<button class="bet1">Bet</button><br />
</div><br />
<table id="choose-address-table" class="ui-widget ui-widget-content" border="1">
<thead>
<tr class="ui-widget-header">
<th>Match</th>
<th>Home</th>
<th>Draw</th>
<th>Away</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arsenal-Chelsea</td>
<td><input type="button" class="nr" value="1.59" id="option_0_0" /></td>
<td><input type="button" class="nr" value="3.40" id="option_0_1" /></td>
<td><input type="button" class="nr" value="2.90" id="option_0_2" /></td>
</tr>
<tr>
<td>Man United-Man City</td>
<td><input type="button" class="nr" value="2.70" id="option_1_0" /></td>
<td><input type="button" class="nr" value="2.90" id="option_1_1" /></td>
<td><input type="button" class="nr" value="2.50" id="option_1_2" /></td>
</tr>
<tr>
<td>Barcelona-Real Madrdid</td>
<td><input type="button" class="nr" value="3.60" id="option_2_0" /></td>
<td><input type="button" class="nr" value="3.20" id="option_2_1" /></td>
<td><input type="button" class="nr" value="1.95" id="option_2_2" /></td>
</tr>
</tbody>
</table>
I am doing some calculations in my php script. its done in jquery/javascript. I have a small issue with my following script. The actual scenario is its getting the Total INR value, In the Add (%) field i add the percentage. So the system calculates and add this percentage to the Total Value. Its perfect in the first row of record. But in the second row, its taking the value of the first row. Iam making a small mistake. My script is following. Pls help me on this.
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.3.js'></script>
<script type='text/javascript'>
//<![CDATA[
function getIndexedElement(item, index) {
if (item.length) {
if (index < item.length) {
return item[index];
} else {
return false;
}
} else {
if (index === 0) {
return item;
}
}
return false;
}
function isNum(value) {
return 123;
}
function calcTotals() {
var grandTotal = 0;
var i = 0;
while (getIndexedElement(document.forms['cart'].elements['add_percentage[]'], i)) {
add_percentageObj = getIndexedElement(document.forms['cart'].elements['add_percentage[]'], i);
addon_valueObj = getIndexedElement(document.forms['cart'].elements['addon_value[]'], i);
total_inr_valueObj = getIndexedElement(document.forms['cart'].elements['total_inr[]'], i);
totalObj = getIndexedElement(document.forms['cart'].elements['add_value[]'], i);
priceunitObj = getIndexedElement(document.forms['cart'].elements['price_unit[]'], i);
qtyObj = getIndexedElement(document.forms['cart'].elements['qty[]'], i);
if (isNaN(add_percentageObj.value)) {
add_percentageObj = '';
}
if (isNaN(addon_valueObj.value)) {
addon_valueObj = '';
}
if (add_percentageObj.value != 0) {
totalObj.value = Math.round((total_inr_valueObj.value * 1) * add_percentageObj.value / 100) + total_inr_valueObj.value * 1;
grandTotal = grandTotal + parseFloat(totalObj.value);
//priceunitObj.value = total1Obj.value/qtyObj.value;
//c.value=Math.round((b.value/100) *a.value ).toFixed(2);
} else if (addon_valueObj.value) {
totalObj.value = Math.round((addon_valueObj.value * 1) + total_inr_valueObj.value * 1);
grandTotal = grandTotal + parseFloat(totalObj.value);
//priceunitObj.value = total1Obj.value/qtyObj.value;
} else {
totalObj.value = Math.round((addon_valueObj.value * 1) + total_inr_valueObj.value * 1);
grandTotal = grandTotal + parseFloat(totalObj.value);
//priceunitObj.value = total1Obj.value/qtyObj.value;
}
i++;
}
document.getElementById('grand_total').value = grandTotal;
return;
}
</script>
</head>
<body>
<form name='cart' method='post' class='single' action='generate_quot_cust_edititems_save_complete.php?tender_id=14'>
<input type='hidden' name='sum_input' id='sum_input' value=''>
<div align="center">
<table width="100%" border="1" style="border-collapse: collapse;" cellpadding="1" cellspacing="1">
<tr bgcolor="#E6E6FA">
<td width=4%>Qty</td>
<td width=5%>Unitprice</td>
<td width=8%>Total INR</td>
<td width=5%>Add (%)</td>
<td width=7%>Add Value</td>
<td width=6%>Total Value</td>
<td width=8%>Total</td>
<td width=8%>Price/Unit</td>
</tr>
</table>
</div>
<div align="center" class="base">
<table width="100%" border="1" style="border-collapse: collapse;" cellpadding="1" cellspacing="1">
<tr>
<td width='4%'>
<input size='1' class='qty' type='text' name='qty[]' id='qty[]' value='20' readonly/>
</td>
<td width='5%'>
<input size='5' type='text' name='unitprice[0]' value='678.000' readonly/>
</td>
<input size='4' type='hidden' id='total_inr[]' name='total_inr[]' value='883332.313' />
<td width='8%'>
<input size='10' type='text' id='total_inr[]' name='total_inr[]' value='883332.300' />
</td>
<td width='5%'>
<input class='' size='4' type='text' id='add_percentage[]' name='add_percentage[]' value='0' onchange='calcTotals()'>
</td>
<td width='7%'>
<input class='txt' type='text' size='7' id='addon_value[]' name='addon_value[]' value='0' onchange='calcTotals()'>
</td>
<td width='6%'>
<input class='total' data-value='883332' size='6' type='text' id='add_value[]' name='add_value[]' value=''>
</td>
<input type="hidden" class="inrvalue" id="inrvalue" name="inrvalue" value="65.1425">
<input type="hidden" class="deptip" id="dept-input" />
<input type="hidden" class="priceip" id="price-input" />
<td width="8%">
<input size="9" type="text" data-value="" name='total1[]' id='total1[]' value="16271.993" readonly class="total1" />
</td>
<td width='8%'>
<input class='price_unit' size='7' type='text' id='price_unit[]' name='price_unit[]' value='813.600' readonly>
</td>
</tr>
</table>
</div>
<div align="center" class="base">
<table width="100%" border="1" style="border-collapse: collapse;" cellpadding="1" cellspacing="1">
<tr>
<td width='4%'>
<input size='1' class='qty' type='text' name='qty[]' id='qty[]' value='360' readonly/>
</td>
<td width='5%'>
<input size='5' type='text' name='unitprice[1]' value='569.000' readonly/>
</td>
<td width='8%'>
<input size='10' type='text' id='total_inr[]' name='total_inr[]' value='13343789.700' />
</td>
<td width='5%'>
<input class='' size='4' type='text' id='add_percentage[]' name='add_percentage[]' value='0' onchange='calcTotals()'>
</td>
<td width='7%'>
<input class='txt' type='text' size='7' id='addon_value[]' name='addon_value[]' value='0' onchange='calcTotals()'>
</td>
<td width='6%'>
<input class='total' data-value='883332' size='6' type='text' id='add_value[]' name='add_value[]' value=''>
</td>
<td width="8%">
<input size="9" type="text" data-value="" name='total1[]' id='total1[]' value="16000.803" readonly class="total1" />
</td>
<td width='8%'>
<input class='price_unit' size='7' type='text' id='price_unit[]' name='price_unit[]' value='44.447' readonly>
</td>
</tr>
</table>
</div>
<table width='100%'>
<tr>
<td width='3%'> </td>
<td width='4%'> </td>
<td width='17%'> </td>
<td width='5%'> </td>
<td width='5%'> </td>
<td width='6%'> </td>
<td width='5%'> </td>
<td width='7%'> </td>
<td width='8%'> </td>
<td width='5%'> </td>
<td height=35><b>Grand Total: <input type='text' style='font-weight: bold' name='gTotal' id='grand_total' value='1766664.000' readonly /></b></td>
</tr>
<tr>
</table>
<br>
</div>
<table border='0' width='13%'>
<td>
<input type='submit' value='--Save Data--' />
</td>
Element ID's have to be unique. If you refer to an element by id, and there are multiple elements with the same ID, then you likely only going to get the first one back. Also, I suspect that elements["name"] does not give an array back, but a unique element.
Instead try using something like this instead:
cartForm = document.forms['cart'];
...
add_percentageObj = getIndexedElement(cartForm.getElementsByName('add_percentage[]'), i);
An element name does not have to be unique. I see that you are already using both id and name anyhow on your elements.
Also I would suggest writing a function like this (untested):
function getCartElement(name, index) {
namedElements = document.forms['cart'].getElementsByName(name);
if (index >= namedElements.length) return null;
return namedElements[index];
if (item.length) {
}
Anyway, the rest of your code would look like something like this:
while (getCartElement('add_percentage[]', i) != null) {
add_percentageObj = getCartElement('add_percentage[]', i);
addon_valueObj = getCartElement('addon_value[]', i);
...
Note that I made sure that your function returns a consistent datatype, not one time boolean, another time an element instance ... this does mean however that you will require to check for null values.
Reference:
getElementsByName
getElementsById
elements
Also read this other stackoverflow article
I currently have a table that contains a few values, 2 input fields and a button for each row in that table. What I want to happen is that when I press the button in the third row, the input fields in the third row become disabled. The other rows should remain unaffected. Unfortunately, due to the nature of the program, adding ID's to the inputs and buttons is not possible.
Does anyone know of a good way to go about this?
<tr>
<td>Text A</td>
<td>Text B</td>
<td><input class="editable"></td>
<td>Text C</td>
<td><input class="editable></td>
<td>Text D</td>
<td><button class="disableInput">OK</button></td>
<tr>
I have ~40 rows like this
Also, due to the table constantly autosaving to a database (for the input) the table gets refreshed every ~0.5 seconds
$(tableId).on("click", "button", function(){
$(this).closest("tr").find("input").attr("disabled", true);
})
Since you are using jQuery, you can do something like this:
$(document).ready(function() {
$("table td .btn").click(function() {
if ($(this).closest("tr").find("input").attr("disabled") === "disabled"){
$(this).closest("tr").find("input").removeAttr("disabled", "disabled");
$(this).closest("tr").find("button").text("Disbale");
}
else{
$(this).closest("tr").find("input").attr("disabled", "disabled");
$(this).closest("tr").find("button").text("Enable");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<button class="btn" type="button" />Disable</button>
</td>
</tr>
</tbody>
</table>
You can do this via traversing the DOM.
$('.disableInput').on('click',function(){
var input = $(this).closest('tr').find('input');
var currstatus = input.prop('disabled');
input.prop('disabled',!currstatus);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
<tr>
<td><input type="text" name="somthing[]"></td>
<td><input type="text" name="something[]"></td>
<td><button class="disableInput">Toggle Input</button></td>
</tr>
</table>
I have successfully done it with one thing going on, but I have two things going on I want to dynamically print that out from the values of two different tables. here is my code: when a button is clicked it goes to another page that prints out what the user filled into the text field. here is how I am doing it:
function print_list(item_names,number_of_items) {
var theText="<ol>";
for(var i=1; i<=number_of_items;i++){
if($("#" + item_names + "_" + i).val()!=''){
theText+="<li>"
theText+=$("#" + item_names + "_" + i).val();
theText+="</li>";
}
}
theText +="</ol>";
$("#print_content_area").html(theText);
Array.filter( document.getElementsByClassName('printArea_1'), function(elem){
$(".printing_list").printElement( elem );
});
}
I need to seperate two different fields here is the table for that
<div id="blue_small_header_text" align="left" style="padding-top:5px;"> What to
say and do <div id="list_buttons"><a class="print_list"
onclick="print_list2('activities_say',3);"></a><a class="list_help"
onclick="openDialog('list_help');"></a></div></div>
<div id="list_question_btn"></div></div>
<div id="activity_area_content" style="padding:5px">
<table width="100%" style="line-height:0px">
<tr>
<td><p style="width:50px;">To say</p></td>
<td><input class="printArea_1 activities_say1_box" name="activities_say_1"
id="activities_say_1" type="text" placeholder="Type or click the list
button >" style="width:340px;" /></td>
<td><input type="button" id="say_1" class="list_btn list_say" value="List >" /></td>
</tr>
<tr>
<td style="font-size:9px;"> To do</td>
<td align="center"><input class="printArea_1 activities_do_box" name="activities_do_1" id="activities_do_1" type="text" placeholder="Type or click the list button >" style="width:340px;" /></td>
<td><input type="button" id="do_1" class="list_btn list_do" value="List >" /></td>
</tr>
<tr>
<td><p style="width:50px;">To say</p></td>
<td><input class="printArea_1 activities_say1_box" name="activities_say_2" id="activities_say_2" type="text" placeholder="Type or click the list button >" style="width:340px;" /></td>
<td><input type="button" id="say_2" class="list_btn list_say" value="List >" /></td>
</tr>
<tr>
<td style="font-size:9px;"> To do</td>
<td align="center"><input class="printArea_1 activities_do_box" name="activities_do_2" id="activities_do_2" type="text" placeholder="Type or click the list button >" style="width:340px;" /></td>
<td><input type="button" id="do_2" class="list_btn list_do" value="List >" /></td>
</tr>
<tr>
<td><p style="width:50px;">To say</p></td>
<td><input class="printArea_1 activities_say1_box" name="activities_say_3" id="activities_say_3" type="text" placeholder="Type or click the list button >" style="width:340px;" /></td>
<td><input type="button" id="say_3" class="list_btn list_say" value="List >" /></td>
</tr>
<tr >
<td style="font-size:9px;"> To do</td>
<td align="center"><input class="printArea_1 activities_do_box" name="activities_do_3" id="activities_do_3" type="text" placeholder="Type or click the list button >" style="width:340px;" /></td>
<td><input type="button" id="do_3" class="list_btn list_do" value="List >" /></td>
</tr>
here is the page that is being printed out.
<div class="printing_list" id="printList2" >
<img id="print_logo" src="/images/print_header_med.png">
<div align="left" id="printHead_text"></div>
<br />
<div align="left" class="listPrint_info" style="width:700px;"></div>
<br />
<table width="100%" style="line-height:20px; margin-left:10px;" >
<tr id="Say_list">
<td id="print_content_area2"></td>
</td>
</tr>
</table>
<table width="100%" style="line-height:20px; margin-left:10px;" >
<tr id="Say_do_list">
<td id="print_content_area2"></td>
</td>
</tr>
</table>
</div>
All,
I have table which I am cloning on clicking on button and after cloning table I need to do few calculation in the cloned table as well as in parent table. My problem is that I am not able to do calculation on each appended(clone) table. I mean I wrote a on blur function to do calculation with textbox value but when I am cloning table since class name is same for all textbox, in parent and cloned table my result showing in all textbox instead of corresponding part of the table. Here is my table and my jquery code which I am following.
<html>
<body>
<table>
<tbody>
<tr><td>
<table width="95%" border="0" cellspacing="5" cellpadding="5" style="margin-left:10px;" id="product">
<thead><tr>
<td class="mandatory"> * Product Name </td>
<td class="label"> Qty.in Stock</td>
<td class="mandatory">* Qty </td>
<td class="mandatory">* Unit Price</td>
<td class="mandatory">* List Price</td>
<td class="mandatory">* Total</td>
</tr>
</thead>
<tbody class="product_details" id="tbody_product">
<tr class="tr_product_details">
<td>
<input type="text" name="txtproductName[]" id="product-name" />
<a href="">
<img width="17" height="16" src="images/Products_small.gif"> </a>
<input type="hidden" name="productid[]" id="productid" />
</td>
<td>
<input type="text" name="txtqtyStock[]" id="productstock" />
</td>
<td>
<input type="text" name="txtQty" id="product-quatity" class="product-qty" value="3" />
</td>
<td>
<input type="text" name="txtUnitPrice[]" id="product-price" />
</td>
<td>
<input type="text" name="txtListPrice[]" id="product-list-price" class="product-list-price"
/>
</td>
<td><div style="margin-left:120px;">
<input type="text" name="txtTotal[]" size="10" class="total-price" />
</div>
</td>
</tr>
<tr>
<td colspan="5"> <img width="17" height="16" src="images/spacer.gif">Product Description </td>
</tr>
<tr>
<td colspan="5"><textarea style="width:65%" maxlength="250" rows="3" cols="30" name="txtProductDescription[]" id="textarea-product-description"></textarea>
</td>
<td colspan="1" class="tbl">
<table >
<tr>
<td>Discount: </td>
<td> <input type="text" name="txtProductDiscount[]" size="10" class="product-discount" /></td>
</tr>
<tr>
<td class="label">Total After Discount: </td>
<td> <input type="text" name="txtAfterDiscount[]" size="10" class="total-after-discount" /></td>
</tr>
<tr>
<td> Tax: </td>
<td><input type="text" name="txtProductTax[]" size="10" />
</td>
</tr>
<tr>
<td class="label"> Net Total: </td>
<td><input type="text" name="txtNetTotal[]" size="10" class="net-total" /> </td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table align="left" style="margin-left:20px;">
<tr>
<td><input type="button" id="btnaddProduct" value="Add Product" class="button"/> </td>
</tr>
</table>
</body>
</html>
And my script which I am using :
<script type="text/javascript">
$(document).ready(function () {
var parent_qty_id = $("#product tbody:first").attr('id');
var qty_attr = parent_qty_id+" tr:first .product-qty";
$("#"+qty_attr+" .product-qty").bind("blur change",function(){
var product_qty = $(this).val(), product_list_price = $('#product tr td .product-list-price').val(),total;
total = product_qty * product_list_price;
// alert( $(this).children().children().attr("class"));
// $(this).children().children().attr("class");
var val = $(this).children();
$(val).val(total+'.00');
});
$("#btnaddProduct").click(function() {
var count = ($("tbody .product_details").length) + 1;
var tblid = $("#product tbody:first").attr('id');
var newid = tblid+"_"+count;
$('#product tbody:first').clone(true).insertAfter('#product > tbody:last').attr("id",newid);
$('table#product > tbody:last > tr:first input').val(' ');
$('table#product > tbody:last > tr:last input').val(' ');
$(":text.product-qty").last().val();
return false;
});
});
</script>
$("#"+qty_attr+" .product-qty")
Comes out empty (no element selected) because you already added .product-qty in parent_qty_id to qty_attr.
$("#"+qty_attr)
Works.
There were alot of other errors in your code which made the blur/change routine run twice etc. I've sanitized it some into this:
$(document).ready(function () {
var parent_qty_id = $("#product tbody:first").attr('id');
var qty_attr = parent_qty_id+" tr:first .product-qty";
$("#"+qty_attr).blur(function(){
var product_qty = $(this).val(), product_list_price = $('#product tr td .product-list-price').val(),total;
total = product_qty * product_list_price;
var val = $(this).children();
$(val).val(total+'.00');
});
$("#btnaddProduct").click(function(e) {
e.preventDefault();
var count = ($("tbody .product_details").length) + 1;
var tblid = $("#product tbody:first").attr('id');
var newid = tblid+"_"+count;
$('#product tbody:first').clone(true).insertAfter('#product > tbody:last').attr("id",newid);
$('table#product > tbody:last > tr:first input').val(' ');
$('table#product > tbody:last > tr:last input').val(' ');
$(":text.product-qty").last().val();
});
});
Further tweaking is probably needed.