I have table with two buttons to add different rows and I tried this code but it doesn't work.
This is my script code:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[1].cells.length;
var cell1 = row.insertCell(0);
cell1.innerHTML = rowCount;
for (var i = 0; i < colCount; i++) {
var newcell = row.insertCell(i + 1);
newcell.innerHTML = table.rows[1].cells[i + 1].innerHTML;
}
}
<table>
<tbody>
<tr>
<td width="550">
<p><strong>Content</strong>
</p>
</td>
<td width="50">
<p align="center"><strong>CLO</strong>
</p>
</td>
<td width="50">
<p align="center"><strong>PLO</strong>
</p>
</td>
<td width="60">
<p align="center"><strong>Weeks</strong>
</p>
</td>
</tr>
<tr id="module">
<td colspan="4" style="width:710; background-color:#A7B8D4; color:white;">
<p class="modulenum"><strong align="center">MODULE 1</strong>
</p>
</td>
</tr>
<tr>
<td valign="top" width="550">
<p>
<input type="text" value="" maxlength="255" class="textborder" class="table" id="dataTable2" />
</p>
</td>
<td width="50">
<p align="center">
<input type="text" value="" maxlength="255" class="textbordersmall" />
</p>
</td>
<td width="50">
<p align="center">
<input type="text" value="" maxlength="255" class="textbordersmall" />
</p>
</td>
<td width="60">
<p align="center">
<input type="text" value="" maxlength="255" class="textbordersmall" />
</p>
</td>
</tr>
<tr style="border:0px;">
<p>
<input type="button" value="Add row" onclick="addRow1('dataTable2')">
<input type="button" value="Add Module" onclick="addRow1('dataTable2')">
</p>
<br>
<br>
</tr>
</tbody>
</table>
<p> </p>
</td>
</tr>
</tbody>
</table>
I want when user click on Add Module button it will repeat module row and increment its number. But when click on Add row button it's only repeat row with its textboxes.
The issues:
The buttons were calling the wrong function name addRow1 instead of addRow
You were passing an id to the function, but the table didn't have one
I've fixed these, and tidied up the code at https://jsfiddle.net/0L4yy5rr/1/
I did this little modification to your code,, take a look, hope that helps you:
function mirko(tableID){
var table=document.getElementById(tableID)
for(var l = 0; l < 2; l++){
var cl = table.tBodies[0].rows[l].cloneNode(true)
table.tBodies[0].appendChild( cl )
}
}
<a type="button" value="Add row" onclick="mirko('dataTable2');">Add row</a>
<table id="dataTable2">
<thead>
<td width="550">
<p> <strong>Content</strong>
</p>
</td>
<td width="50">
<p align="center"> <strong>CLO</strong>
</p>
</td>
<td width="50">
<p align="center">
<strong>PLO</strong>
</p>
</td>
<td width="60">
<p align="center">
<strong>Weeks</strong>
</p>
</td>
</thead>
<tbody>
<tr id="module">
<td colspan="4" style="width:710; background-color:#A7B8D4; color:white;">
<p class="modulenum">
<strong align="center">MODULE 1</strong>
</p>
</td>
</tr>
<tr>
<td valign="top" width="550">
<p>
<input type="text" value="" maxlength="255" class="textborder" class="table" />
</p>
</td>
<td width="50">
<p align="center">
<input type="text" value="" maxlength="255" class="textbordersmall"/>
</p>
</td>
<td width="50">
<p align="center">
<input type="text" value="" maxlength="255" class="textbordersmall"/>
</p>
</td>
<td width="60">
<p align="center">
<input type="text" value="" maxlength="255" class="textbordersmall"/>
</p>
</td>
</tr>
</tbody>
</table>
I solved my problem but there is another problem in counting module row when user delete module row then add another one it continues counting like user delete module 2 then add module row it must be 2 but add module 3.
<html>
<head>
<style type="text/css">
table {border-collapse:collapse;}
.tf{border-bottom:0;}
</style>
<SCRIPT TYPE="text/javascript">
var num=1;
function addmodule(in_tbl_name)
{
var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0];
var row1 = document.createElement("TR");
// create table cell 1
var td = document.createElement("TD")
td.setAttribute('colspan',5);
td.bgColor="#A7B8D4";
td.innerHTML = "<label style=\"width:570; background-color:#A7B8D4; color:white;\">"+"Module "+num+"</label>";
row1.appendChild(td);
// add to count variable
num = parseInt(num) + 1;
// append row to table
tbody.appendChild(row1);
}
var count=1;
function addRow(in_tbl_name)
{
var tbody = document.getElementById(in_tbl_name).getElementsByTagName("TBODY")[0];
// create row
var row = document.createElement("TR");
var td1 = document.createElement("TD")
var strHtml1 = "<INPUT TYPE=\"text\" NAME=\"in_name\" SIZE=\"5\" MAXLENGTH=\"255\" class=\"textborder\';\">";
td1.innerHTML=strHtml1 ;
var td2 = document.createElement("TD")
var strHtml2 = "<INPUT TYPE=\"text\" NAME=\"in_name\" SIZE=\"30\" MAXLENGTH=\"255\" class=\"textbordersmall\';\">";
td2.innerHTML=strHtml2;
var td3 = document.createElement("TD")
var strHtml3 = "<INPUT TYPE=\"text\" NAME=\"in_name\" SIZE=\"5\" MAXLENGTH=\"255\" class=\"textbordersmall\';\">";
td3.innerHTML=strHtml3 ;
var td4 = document.createElement("TD")
var strHtml4 = "<INPUT TYPE=\"text\" NAME=\"in_name\" SIZE=\"5\" MAXLENGTH=\"255\" class=\"textbordersmall\';\">";
td4.innerHTML=strHtml4 ;
// append data to row
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
// add to count variable
count = parseInt(count) + 1;
// append row to table
tbody.appendChild(row);
}
function deleterow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if (rowCount==1) {return false;
}
else{
table.deleteRow(rowCount -1);
}}
</SCRIPT>
</head>
<body>
<TABLE ID="tbl" width="570" border="1" cellspacing="0" cellpadding="0" align="center" class="st">
<TH WIDTH="400">Content</TH><TH WIDTH="57">CLO</TH><TH WIDTH="57">PLO</TH> <TH WIDTH="56">Week</TH>
<p align="center">
<input type="button" onClick="addmodule('tbl')" VALUE="Add Module">
<INPUT TYPE="Button" onClick="addRow('tbl')" VALUE="Add Row">
<INPUT TYPE="Button" onClick="deleterow('tbl')" VALUE="delete Row"> </p>
</TABLE>
</body>
</html>
Related
Please help me. I am new to javascript. I want my table entries deleted on form itself when user selects row using javascript and html.
I tried delet function but it remove heading too which i dont want. user should select row and it should be deleted.
html code:
<body>
<form>
<h2>Receipt</h2>
<table>
<tr>
<td>
<label for="ctype">Charge Type</label>
</td>
<td>
<input id="ctype" name="ctype" placeholder="--" style="border: none;" type="text" />
</td>
</tr>
<tr>
<td>
<label for="amt">Amount</label>
</td>
<td>
<input id="amt" name="amt" placeholder="--" style="border: none;" type="text" />
</td>
</tr>
<tr>
<td>
<label for="camt">Cash Amount</label>
</td>
<td>
<label>100</label>
</td>
</tr>
</table>
<br><input type="reset" name="reset" id="resetbtn" style="border: none; height:30px; width:100px;" class="resetbtn" value="Reset" />
<button type="button" style="border: none; height:30px; width:100px;" onClick="updateForm();"/>Add To Table</button>
<button type="button" style="border: none; height:30px; width:100px;" onClick="saveForm()" />Save</button>
<button type="button" style="border: none; height:30px; width:100px;" onClick="deletRow()" />Remove</button>
</form>
<br>
<table id="results" width="360">
<thead>
<tr>
<th scope="col" width="120">Charge Type</th>
<th scope="col" width="120">Amount</th>
</tr>
</thead>
</table>
<table id="resultTotals" width="360">
<tr>
<td scope="col" width="120">Totals</td>
<td scope="col" width="120"><div id="amtTotals"></div></td>
</tr>
</table>
</body>
Javascript code:
<script>
var amtTotal = 0;
function updateForm() {
var ctype = document.getElementById("ctype").value;
var amt = document.getElementById("amt").value;
amtTotal = amtTotal + parseInt(amt);
document.getElementById("amtTotals").innerHTML=amtTotal;
var table=document.getElementById("results");
var row=table.insertRow(-1);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
cell1.innerHTML=ctype;
cell2.innerHTML=amt;
}
function saveForm() {
if( amtTotal < 100 ){
alert("Thank you");
} else
{
alert("Invalid Amount")
}
}
function deletRow() {
document.getElementById("results").deleteRow(0);
}
</script>
Thank You. Sorry for grammar.
1) create checkbox for each row
2) based on checkbox remove the row
3) while remove you need to minus the current row amount in total amount like this
4) And there was a trick you need to delete the row from last like bottom to top . if you delete the row top to bottom it will throw row index error.
var amtTotal = 0;
function updateForm() {
var ctype = document.getElementById("ctype").value;
var amt = document.getElementById("amt").value;
amtTotal = amtTotal + parseInt(amt);
document.getElementById("amtTotals").innerHTML=amtTotal;
var table=document.getElementById("results");
var row=table.insertRow(-1);
var cell1=row.insertCell(0);
var cell2=row.insertCell(1);
var cell3=row.insertCell(2);
cell1.innerHTML=ctype;
cell2.innerHTML=amt;
cell3.innerHTML='<input type="checkbox" name="deletee" value="1" >';
}
function saveForm() {
if( amtTotal < 100 ){
alert("Thank you");
} else
{
alert("Invalid Amount")
}
}
function deletRow() {
//document.getElementById("results").deleteRow(0);
var table = document.getElementById('results');
var rowCount = table.rows.length;
//alert(rowCount);
var row_ids =[];
// var i=1 to start after header
for(var i=rowCount-1; i>=rowCount-(rowCount-1); i--) {
var row = table.rows[i];
// index of td contain checkbox is 8
if(row)
{
var chkbox = row.cells[2].getElementsByTagName('input')[0];
var current_row_amount = row.cells[1].innerHTML;
//alert(chkbox.checked);
if('checkbox' == chkbox.type && true == chkbox.checked) {
//row_ids.push(i);
table.deleteRow(i);
amtTotal= amtTotal-parseInt(current_row_amount);
document.getElementById("amtTotals").innerHTML=amtTotal;
}
}
}
}
<form>
<h2>Receipt</h2>
<table>
<tr>
<td>
<label for="ctype">Charge Type</label>
</td>
<td>
<input id="ctype" name="ctype" placeholder="--" style="border: none;" type="text" />
</td>
</tr>
<tr>
<td>
<label for="amt">Amount</label>
</td>
<td>
<input id="amt" name="amt" placeholder="--" style="border: none;" type="text" />
</td>
</tr>
<tr>
<td>
<label for="camt">Cash Amount</label>
</td>
<td>
<label>100</label>
</td>
</tr>
</table>
<br><input type="reset" name="reset" id="resetbtn" style="border: none; height:30px; width:100px;" class="resetbtn" value="Reset" />
<button type="button" style="border: none; height:30px; width:100px;" onClick="updateForm();"/>Add To Table</button>
<button type="button" style="border: none; height:30px; width:100px;" onClick="saveForm()" />Save</button>
<button type="button" style="border: none; height:30px; width:100px;" onClick="deletRow()" />Remove</button>
</form>
<br>
<table id="results" width="360">
<thead>
<tr>
<th scope="col" width="120">Charge Type</th>
<th scope="col" width="120">Amount</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<table id="resultTotals" width="360">
<tr>
<td scope="col" width="120">Totals</td>
<td scope="col" width="120"><div id="amtTotals"></div></td>
</tr>
</table>
I am able to create dynamic textboxes on one button click but now the requirement is that we have to get values of that textboxes and send it to java class where I can use those values entered in the created dynamic textboxes but I am unable to do so.I have tried my best to solve this problem but I am stuck in getting values and sending it to action class.I have referred this link where umesh awasthi sir has answered but here it is for single value but how to get values from dynamically created and pass those and get it separately in action class.
Below is my javascript code :
<script>
function addFieldForDescription() {
alert("Inside Function");
var table = document.getElementById("addTable");
var tr = document.getElementById("addTables");
var a = table.rows.length;
alert(a);
var row = table.insertRow(a);
// var cell0=row.insertCell(0);
// cell0.innerHTML=a;
var input = document.createElement("input");
input.type = "text";
input.id="addDesc"+a;
input.size="40";
var br = document.createElement("br");
tr.appendChild(br);
tr.appendChild(input);
tr.appendChild(br);
}
function addFieldForAmount() {
alert("Inside Function");
var table = document.getElementById("addTable");
var tr = document.getElementById("addTables1");
var a = table.rows.length;
alert(a);
var row = table.insertRow(a);
// var cell0=row.insertCell(0);
// cell0.innerHTML=a;
var input = document.createElement("input");
input.type = "text";
input.id="addAmount"+a;
input.size="40";
var br = document.createElement("br");
tr.appendChild(br);
tr.appendChild(input);
tr.appendChild(br);
}
function submitValues()
{
alert("Inside Submit");
var amountId=document.getElementById("addTables");
alert(amountId.value);
for(var i=0;i<amountId.rows.length;i++)
{
var temp=document.getElementById("addDesc"+i);
alert(temp.value);
}
}
</script>
and below is my jsp code
<html>
<head>
</head>
<body>
<table class="responstable3" id="addTable">
<tr>
<th></th>
<th style="width: 60%;">Description <input
type="button" name="add" value="+"
onclick="addFieldForDescription()" id="addDesc0"
class="btn btn-warning" /> <input type="button"
value="Submit" onclick="submitValues()"/></th>
<th data-th="Amount"><span>Amount <input
type="button" name="add" value="+"
onclick="addFieldForAmount()" id="addAmount"
class="btn btn-warning" /></span></th>
</tr>
<tr>
<td> </td>
<td id="addTables"><input type="text" id="add" size="40" /><br></td>
<td id="addTables1"><input type="text" id="addAmount"
size="40" /><br></td>
</tr>
<tr>
<td colspan="2" style="padding: 0px;">
<table class="responstable4">
<tr>
<td style="text-align: left;">Pan No. :<input
type="text" name="invoiceVar.panNumber"
class="profarma_formtextbox1" /></td>
<td style="text-align: left;">Net Amount :</td>
</tr>
<tr>
<td style="text-align: left;">Service Tax No. :<input
type="text" name="invoiceVar.serviceTaxNumber"
class="profarma_formtextbox1" /></td>
<td style="text-align: left;">Service Tax # 14.00%</td>
</tr>
<tr>
<td style="text-align: left;"></td>
<td style="text-align: left;">SBC # 0.50%</td>
</tr>
<tr>
<td style="text-align: left;"></td>
<td style="text-align: left;">Total Amount</td>
</tr>
</table>
</td>
<td style="padding: 0px;">
<div ng-app>
<table class="responstable4">
<tr>
<td><input type="text" name="invoiceVar.netAmount"
class="profarma_formtextbox2" ng-model="a" /></td>
</tr>
<tr>
<td><input type="text" name="invoiceVar.serviceTax"
class="profarma_formtextbox2" value="{{a*0.14}}" /></td>
</tr>
<tr>
<td><input type="text" name="invoiceVar.sbcTax"
class="profarma_formtextbox2" value="{{a*0.005}}" /></td>
</tr>
<tr>
<td><input type="text"
name="invoiceVar.invoiceTotalAmount"
class="profarma_formtextbox2"
value="{{a--(a*0.14)--(a*0.005)}}" /></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="3" style="text-align: left;">Total Amount in
Words :</td>
</tr>
</table>
</body>
</html>[![error][2]][2]
and here it is how it looks like.yellow plus button will add textboxes in description and amount column and I have to call those values in action class.
Any help would be greatly appreciated .thank you :)
my problem is that when I click my add row button that is in the table it adds a new row only in the first cell instead of in the new cell. Any ways to correct this?
<html>
<body>
<input name="button2" type="button" onClick="addRow('dataTable')" value="Add Row" />
<table id="dataTable" width="150px" border="1">
<tr>
<td height="84">
1
</td>
<td>
<input type="text" />
</td>
<td> <input name="button" type="button" onClick="addRow('dataTable1')" value="Add Row" />
<table id="dataTable1" width="150px" border="1">
<tr>
<td height="27"> 1 </td>
<td> <input name="text" type="text" /> </td>
<td> <input name="text" type="text" /> </td>
<td> <input name="button" type="button" onClick="addRow('dataTable1')" value="Add Row" />
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
var contents = document.getElementById('dataTable').outerHTML;
var contents = document.getElementById('dataTable1').outerHTML;
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var firstCell = row.insertCell(0);
firstCell.setAttribute('colspan', 3);
var newCont = contents.replace(' 1 ', rowCount + 1);
firstCell.innerHTML = newCont;
}
</script>
<form>
<table width="660" border="0" class="DarkButtonStyleMedium">
<tr>
<td width="299"> </td>
<td width="332" rowspan="11"><img src="Images/PCD-HOLES.png" width="350" height="353"
class="ButtonStyleMedium"/></td>
</tr>
<tr>
<td>
<div align="right">PITCH CIRCLE <span
class="GeneralPageTextWhite">DIAMETER (PCD):</span><span
class="GeneralPageText">:
<input name="diameter" type="Number" class="ButtonStyleMedium" id="diameter"
value="" size="12"/>
</span></div>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div align="right"><span class="GeneralPageTextWhite"> NUMBER OF HOLES:
<input name="number" type="Number" class="ButtonStyleMedium" id="number"
value="" size="12"/>
</span></div>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div align="right"><span class="GeneralPageTextWhite">START ANGLE (A):
<input name="startangle" type="Number" class="ButtonStyleMedium" id="startangle"
value="" size="12"/>
</span></div>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div align="right"><span class="GeneralPageText">
<input type="button" class="ButtonStyleMedium" onclick="calculateAll();" value='SOLVE'/>
</span></div>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div align="right"><span class="GeneralPageText">
<input type="button" class="ButtonStyleMedium" onclick="clearAll();clearTable();" value='RESET'/>
</span></div>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
<p> </p>
<div class="ButtonStyleAnswer">
<table id="resultTable" width=600 border="0.5">
<colgroup>
<col width=200>
</colgroup>
<tr>
<th>
<div align="left" width=200 >HOLE NUMBER</div>
</th>
<th>
<div align="left" width=200 >X CO-ORDINATE</div>
</th>
<th>
<div align="left" width=200 >Y CO-ORDINATE</div>
</th>
</tr>
<tr>
<td height="19" colspan="3">
<div align="center"></div>
<div align="center"></div>
<div align="center"></div>
</td>
</tr>
</table>
</div>
<p> </p>
</form>
<p> </p>
</div>
<script>
function calculateAll() {
var diameter = Number(document.getElementById("diameter").value);
var number = Number(document.getElementById("number").value);
var startangle = Number(document.getElementById("startangle").value);
do {
var holenumber = 0;
var boltholenumber = holenumber + 1;
var radius = diameter / 2;
var k = (holenumber * (360 / number)) + startangle;
var xresult = radius * Math.cos(k);
var yresult = radius * Math.sin(k);
var table = document.getElementById("resultTable");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(1);
cell2.innerHTML = xresult.toFixed(5);
cell3.innerHTML = yresult.toFixed(5);
cell1.innerHTML = boltholenumber.toFixed(0);
holenumber++;
}
while (holenumber > number);
}
function clearAll() {
document.getElementById("diameter").value = "";
document.getElementById("number").value = "";
document.getElementById("startangle").value = "";
document.getElementById("boltholenumber").value = "";
document.getElementById("xresult").value = "";
document.getElementById("yresult").value = "";
}
function clearTable() {
var elmtTable = document.getElementById('resultTable');
var tableRows = elmtTable.getElementsByTagName('tr');
var rowCount = tableRows.length;
for (var x = rowCount - 1; x > 0; x--) {
elmtTable.removeChild(tableRows[x]);
}
}
</script>
Hi
I have a two part question but I'm not sure if this allowed.
The first part being I can only get one row of outputs from the do/while loop, is this because I am writing to the same cells although I am using table.insertRow(-1) within the loop.
The second part is I cannot clear the one row of results from the table using the clearAll function, i cannot see why. I have used Jsfiddle and get no hints.
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.