Hey Karl,
Thanks for the reply. To be honest, I am not sure how to implement your provided code. I have a couple more aspects to this than I forgot to mention; which at the time I didn't think would have any effect on the actual Inserting / Removing rows, but see now that it will. Let me provide some code:
Here is the page that will need to Add / Remove - Main Rows / Sub Rows (including your provided code, not modified yet):
Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Learning JavaScript</title>
<script type="text/javascript" src="prototype.js">
pAddMainRowLink.onclick = function()
{
// Grab the main row container element.
// We're selecting it by the className, so you need to update
// this to match the className of your container
var pMainRowContainer = this.up('mainRowContainerClassName');
if (!pMainRowContainer)
{
return;
}
pMainRowContainer.appendChild(page.createMainRow());
}
page =
{
createMainRow: function()
{
var pMainRow = $(document.createElement('div'));
// Add some test content
pMainRow.update('My new main row!')
//... setup main row, add content, etc.
return pMainRow;
}
}
</script>
<script type="text/javascript" src="totalPrice.js"></script>
</head>
<body onload="commercialLabor(); inventoryParts(); commercialPrice();">
<form name="work_order">
<table>
<tr class="main_heading">
<th>Initials</th>
<th>Work Code</th>
<th>Commercial Labor</th>
<th>Inventory Price</th>
<th>Commercial Price</th>
</tr>
<tr class="main_row">
<td><input type="" name="initials" /></td>
<td><input type="" name="work_code" /></td>
<td><input type="" name="commercialLabor_total" /></td> <!-- Total for Commercial Labor for Sub-Rows under this Main-Row -->
<td><input type="" name="inventoryParts_total" /></td> <!-- Total for Inventory Price for Sub-Rows under this Main-Row -->
<td><input type="" name="commercialPrice_total" /></td> <!-- Total for Commercial Price for Sub-Rows under this Main-Row -->
</tr>
<tr class="sub_heading">
<th>Part Name</th>
<th>Quantity</th>
<th>Commercial Labor</th>
<th>Inventory Price</th>
<th>Commercial Price</th>
</tr>
<tr class="sub_row">
<td><input type="" name="part" /></td>
<td>
<input type="" name="commercial_quantity" style="width: 16px;" />
<input type="" name="inventory_quantity" style="width: 16px;" />
</td>
<td><input type="" name="commercial_labor" onchange="commercialLabor();" /></td>
<td><input type="" name="inventory_price" onchange="inventoryParts();" /></td>
<td><input type="" name="commercial_price" onchange="commercialPrice();" /></td>
</tr>
<tr class="sub_row">
<td><input type="" name="part" /></td>
<td>
<input type="" name="commercial_quantity" style="width: 16px;" />
<input type="" name="inventory_quantity" style="width: 16px;" />
</td>
<td><input type="" name="commercial_labor" onchange="commercialLabor();" /></td>
<td><input type="" name="inventory_price" onchange="inventoryParts();" /></td>
<td><input type="" name="commercial_price" onchange="commercialPrice();" /></td>
</tr>
</table>
</form>
</body>
</html>
As you can see I also have a couple more aspects to it; the price totaling. For which here is the JS file:
totalPrice.js
Code:
<!--
//-----------------------------------
// Expense Row Totals
//-----------------------------------
function my_round(num, dec)
{
dec = dec === undefined ? 2 : dec;
if (typeof num == "number" && typeof dec == "number")
{
return num.toFixed(dec);
}
return Number.NaN;
}
//Commercial Labor
function commercialLabor()
{
var elems = document.forms['work_order'].elements;
var total_price = 0;
for (var i = 0; i < elems.length; i++)
{
if (elems[i].name.indexOf('commercial_labor') !=-1)
{
total_price += +(elems[i].value);
}
}
elems['commercialLabor_total'].value = my_round(total_price);
}
//Inventory Parts
function inventoryParts()
{
var elems = document.forms['work_order'].elements;
var total_price = 0;
for (var i = 0; i < elems.length; i++)
{
if (elems[i].name.indexOf('inventory_price') !=-1)
{
total_price += +(elems[i].value);
}
}
elems['inventoryParts_total'].value = my_round(total_price);
}
//Commercial Parts
function commercialPrice()
{
var elems = document.forms['work_order'].elements;
var total_price = 0;
for (var i = 0; i < elems.length; i++)
{
if (elems[i].name.indexOf('commercial_price') !=-1)
{
total_price += +(elems[i].value);
}
}
elems['commercialPrice_total'].value = my_round(total_price);
}
//-->
And the heading rows. Which I am sure will complicate things a little more, being as the would have to be added dynamically too.
I will also need to figure out how to get my prices to total with the dynamic rows now. A big headache for me.
If at this point this is getting too in depth to help me, I understand. I don't blame anyone at all.
Edit: the above code doesn't contain any of the Add / Remove code I had, it seemed pretty messy.
Join the friendly bunch on IRC...
Multiple rows - dynamic
Linear Mode
