I have a table that I write rows to rows[0]. The added rows are all classed ‘Itemrow’. Cells[8] of any ‘itemrow’ already add to the innerHTML of cell id ‘subtotal’. This works fine. The problem is that when I delete any of the rows cells[8] of the remaining rows no longer equal the innerHTML of ‘subtotal’. Infact they are all different even though ‘subtotal’ changes correctly. What I’d like is that all cells[8] of any remaining ‘itemrows’ equal that of ‘subtotal’.
deleterow()
var sTotal=sumsubtotal();
var addrowsubtotal=itemrow.insertCell(7);
addrowsubtotal.setAttribute('colspan','1');
addrowsubtotal.setAttribute('title','Subtotal cost of your order.');
addrowsubtotal.className='rowsubtotal';
addrowsubtotal.appendChild(document.createTextNode(subtotal.innerHTML));
var addclear=itemrow.insertCell(8);
addclear.setAttribute('colspan','1');
addclear.className='clear';
addclear.setAttribute('align','center');
addclear.innerHTML='<a title="Remove this item" class="removeitem" onclick="deleterow(this);">[x]</a>';
//relavent part of 'addrow()'??
function sumsubtotal(){
var cartitems=document.getElementsByClassName('itemrow');
var itemrows=cartitems;
var sTotal=0.0;
for(var i=0;i<itemrows.length;i++)
{
var itemrow=itemrows[i];
var price=itemrow.cells[4];
var quantity=itemrow.cells[5].getElementsByTagName('input')[0].value;
var cost=itemrow.cells[6].innerHTML;
sTotal+=Number(cost) || 0;
multiply=price*quantity;
}
cost=parseFloat(multiply).toFixed(2);
subtotal.innerHTML=numberFormat(parseFloat(sTotal).toFixed(2));
ordersum.innerHTML=subtotal.innerHTML;
noofitems.innerHTML=itemrows.length;
}
function deleterow(a) {
// remove row that works
var row=a.parentNode.parentNode;
row.parentNode.removeChild(row);
var sTotal=sumsubtotal( );//works on cell id 'subtotal' not on remaining 'itemrow' cells[8]
EvalSound4();
}
Could realy use some fresh eyes on this.:x
OK. Title of this post should be 'All cells[7] in table must equal cell id ‘subtotal’ and no body seems interested or are busy! To clarify the situation I’ve shown the HTML that is generated.
index.html
<tfoot id="cartfoot">
<tr id="footsubtotal">
<td class="col1" colspan="2">Subtotal:</td>
<td id="subtotal" class="col2" colspan="1">$ 75.00</td>
//all cells[7] of rows className "itemrow" should be equal to this cells innerHTML
<td class="add" colspan="2"></td>
</tr>
</tfoot>
<tbody id="cartbody">
<tr class="itemrow"> //2nd row className "itemrow" inserted at rows[0]
<td class="code">0123</td> //cells[0] of 2nd row className "itemrow"
<td class="item">Classic Beauty</td> //cells[1] of 2nd row className "itemrow"
<td class="color">Silver</td> //cells[3] of 2nd row className "itemrow"
<td class="size">16"</td> //cells[4] of 2nd row className "itemrow"
<td class="size"><input type="text" name="qty[]" id="qty[]" class="qty" onkeydown="changeqty(this.value);/></td>
//cells[5] of 2nd row className "itemrow"
<td class="cost">$ 50.00</td> //cells[6] of 2nd row className "itemrow"
<td class="rowsubtotal">$ 75.00</td> //cells[7] of 2nd row className "itemrow" cell in question??
<td class="clear"><a title="Remove this item" class="removeitem" onclick="deleterow(this);">[x]</a></td>
//cells[8] of 2nd row className "itemrow" deleterow() works but all "itemrow"s cells[7] don't equal cell id "subtotal" innerHTML
</tr>
<tr class="itemrow"> //1st row className "itemrow" inserted at rows[0]
<td class="code">0122</td> //cells[0] of 1st row className "itemrow"
<td class="item">Braided Bangel</td> //cells[1] of 1st row className "itemrow"
<td class="color">Silver</td> //cells[3] of 1st row className "itemrow"
<td class="size">14"</td> //cells[4] of 1st row className "itemrow"
<td class="size"><input type="text" name="qty[]" id="qty[]" class="qty" onkeydown="changeqty(this.value);/></td>
//cells[5] of 1st row className "itemrow"
<td class="cost">$ 25.00</td> //cells[6] of row className "itemrow"
<td class="rowsubtotal">$ 25.00</td> //cells[7] of 1st row className "itemrow" cell in question??
<td class="clear"><a title="Remove this item" class="removeitem" onclick="deleterow(this);">[x]</a></td>
//cells[8] of 1st row className "itemrow" deleterow() works but all "itemrow"s cells[7] don't equal cell id "subtotal" innerHTML
</tr>
<tr class="dumy" id="dumy">//original rows[0]
<td class="clientmessage" id="clientmessage" colspan="12">Are you ready to shop?</td> </tr>
</tbody>
Since the cells[7] of rows with className “itemrow” are className “rowsubtotal”, I have to create a function that loops through all cells className “rowsubtotal” and compare them to the innerHTML of cell id “subtotal” and if they don’t match then force them to match. ‘checksubtotal()’ will then be added to ‘deleterow()’, something like this?
product.js
function checksubtotal(){
var subtotal=document.getElementById('subtotal').innerHTML;
var rowsubtotals=document.getElementsByClassName('rowsubtotal');
for(var i=0; i< rowsubtotals.length; i++){
var rowsubtotal=rowsubtotals[i];
if(rowsubtotal.innerHTML!==subtotal){ //comparison '!==' ???
rowsubtotal.innerHTML=subtotal;
}
else{
rowsubtotal.innerHTML=subtotal;
}}
function deleterow(a) {
// remove row
var row=a.parentNode.parentNode;
row.parentNode.removeChild(row);
var sTotal=sumsubtotal(); //don't know what this is but seems to work??
EvalSound4();
checksubtotal();//might work??
}
OK. no responce from the script gods so I’ve decided to simplify the html.
index.html
<tfoot>
<tr id="footsubtotal">
<td id="subtotal">$ 75.00</td>
//all cells of class "rowsubtotal" must have same innerHTML as this.
</tr>
</tfoot>
<tbody>
<tr class="itemrow"><td class="rowsubtotal">$ 15.00</td></tr>
<!--3rd inserted row at row index 0 innerHTML should be '$ 75.00'-->
<tr class="itemrow"><td class="rowsubtotal">$ 20.00</td></tr>
<!--2nd inserted row at row index 0 innerHTML should be '$ 75.00'-->
<tr class="itemrow"><td class="rowsubtotal">$ 40.00</td></tr>
<!--1st inserted row at row index 0 innerHTML should be '$ 75.00'-->
<tr class="dumy"><td class="message">Thank You</td></tr>
</tbody>
I hope that clarifies what I’m trying to do?
:x
Ok. after opening a brace before the if statement and taking out the else statement thanks to pactor21 at webdeveloper.com, I got the first inserted row and last inserted row containing cells of className ‘rowsubtotal’ innerHTML to match the innerHTM of cell id ‘subtotal’ in the table but any rows in between row index 0 and row index -1 or last are unchanged.
The script
function checksubtotal(){
var subtotal=document.getElementById('subtotal').innerHTML;
var rowsubtotals=document.getElementsByClassName('rowsubtotal');
for(var i=0; i< rowsubtotals.length; i++){ //loop only gets first and last
var rowsubtotal=rowsubtotals[i];
}
if(rowsubtotal.innerHTML!==subtotal){ // may need comparison '!match subtotal' ?
rowsubtotal.innerHTML=subtotal;
}
}
function deleterow(a) {
// remove row
var rowsubtotals=document.getElementsByClassName('rowsubtotal');
var row=a.parentNode.parentNode;
row.parentNode.removeChild(row);
var sTotal=sumsubtotal();
checksubtotal();//only changes first and last rows cells className 'rowsubtotal' ?
EvalSound4();
}
HTML RESULT
<tfoot>
<tr id="footsubtotal">
<td id="subtotal">$ 75.00</td>
//all cells of class "rowsubtotal" must have same innerHTML as this.
</tr>
</tfoot>
<tbody>
<tr class="itemrow"><td class="rowsubtotal">$ 75.00</td></tr>
<!--3rd inserted row at row index 0 innerHTML equals '$ 75.00' or innerHTML of 'subtotal'-->
<tr class="itemrow"><td class="rowsubtotal">$ 20.00</td></tr>
<!--2nd inserted row at row index 0 innerHTML should be '$ 75.00' but doesn't ?-->
<tr class="itemrow"><td class="rowsubtotal">$ 75.00</td></tr>
<!--1st inserted row at row index 0 innerHTML equals '$ 75.00' or innerHTML of 'subtotal'-->
<tr class="dumy"><td class="message">Thank You</td></tr>
</tbody>
I’m realy thinking a comparison by match of the innerHTML of ‘subtotal’ might get the for loop getting all the cells of className ‘rowsubtotal’ to equal cell id ‘subtotal’ innerTML. Will check it out.
Wow Taywin that got it. God, Allah and Budah bless you! So simple and it was the the third and final ‘}’ closing brace that got all cells of className ‘rowsubtotal’ to equal the innerHTML of cell id ‘subtotal’. This is the script that works.
SCRIPT THAT WORKS
function checksubtotal(){
var subtotal=document.getElementById('subtotal').innerHTML;
var rowsubtotals=document.getElementsByClassName('rowsubtotal');
for(var i=0; i< rowsubtotals.length; i++){
if(rowsubtotals[i].innerHTML!==subtotal){
rowsubtotals[i].innerHTML=subtotal;
}}}
function deleterow(a) {
// remove row
var rowsubtotals=document.getElementsByClassName('rowsubtotal');
var row=a.parentNode.parentNode;
row.parentNode.removeChild(row);
var sTotal=sumsubtotal();
checksubtotal(); //Finaly works!!!
EvalSound4();
}
HTML RESULT
<tfoot>
<tr>
<td id="subtotal">$ 75.00</td>
</tr>
<tr>
<td id="message">Muchos Mas Gracias!</td>
</td>
</tr>
</tfoot>
<tbody>
<tr class="itemrow">
<td class="rowsubtotal">$ 75.00</td>
</tr>
<tr class="itemrow">
<td class="rowsubtotal">$ 75.00</td>
</tr>
<tr class="itemrow">
<td class="rowsubtotal">$ 75.00</td>
</tr>
<tr class="itemrow">
<td class="rowsubtotal">$ 75.00</td>
</tr>
<tr class="itemrow">
<td class="rowsubtotal">$ 75.00</td>
</tr>
<tr id="dummy">
<td id="client Message">Thank You very Much <b>Taywin</b></td>
</tr>
</tbody>
Thanks again Taywin from DaniWeb.com