www.webdeveloper.com
Results 1 to 8 of 8

Thread: Get cells by className to equal innerHTML of cell id 'subtotal'

  1. #1
    Join Date
    Nov 2009
    Posts
    268

    Question Get cells by className to equal innerHTML of cell id 'subtotal'

    I'm trying to grab all the cells created with insertrow function and the className 'rowtotal' and get their innerHTML to equal that of a cell with id 'subtotal'. This is a simplified html code of single cell inserted rows:

    index.html
    HTML Code:
    <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="dummy">
    <td class="message">Thank You</td>
    </tr> 
    </tbody>
    These functions are not working and I'm not sure I can get javascript functions that will.

    product.js
    Code:
    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; }}//throws syntax error?  
    
    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();
    //doesn't work??
    Not sure if this is the wrong approach, might have to use a
    !match syntax. Any help greatly appreciated
    Last edited by THEFOOL; 10-20-2011 at 05:37 PM.

  2. #2
    Join Date
    Sep 2009
    Posts
    159
    Would you mind rephrasing what you want to accomplish through the script?
    Got jQuery problem? jQuery vault can help you find solutions. Give it a try and find out.

    Click jQuery vault to help us help you.

  3. #3
    Join Date
    Nov 2009
    Posts
    268

    Unhappy Get cells by className to equal innerHTML of cell id 'subtotal'

    Code:
    function checksubtotal(){ 
    var subtotal=document.getElementById('subtotal').innerHTML; 
    //the cell who's innerHTML must be duplicated in cells of className 'rowsubtotal'
    var rowsubtotals=document.getElementsByClassName('rowsubtotal'); 
    //all the cells with className '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; }}//throws syntax error?  
    
    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();//doesn't work??
    }
    Hope that helps, sorry I'm finding it very difficult to express what I feel I have already explained. " I want all cells of className 'rowsubtotal' to have the same innerHTML as cell id 'subtotal' "
    Last edited by THEFOOL; 10-21-2011 at 11:18 AM.

  4. #4
    Join Date
    Sep 2009
    Posts
    159
    Code:
    function checksubtotal(){ 
         var subtotal=document.getElementById('subtotal').innerHTML; 
         //the cell who's innerHTML must be duplicated in cells of className 'rowsubtotal'
         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;
              }
         }
    First of all, you NEED to use proper indentation in your code. I did it for you to see why there is a syntax error. (All I did is the indentation to your code.)

    You didn't close your function braces, and that is what causes the syntax error at the end of the function.

    And for the content of the for loop,
    Code:
    var rowsubtotal=rowsubtotals[i]; 
         if(rowsubtotal.innerHTML!==subtotal){ //comparison '!==' ??? 
             rowsubtotal.innerHTML=subtotal;
         } 
         else{
              rowsubtotal.innerHTML=subtotal;
         }
    What is the point of if else clause when they do the same thing all over? I guess I can just display what's in the subtotal cell where you need it using jQuery, but not with native javascript. I'm working on it.
    Got jQuery problem? jQuery vault can help you find solutions. Give it a try and find out.

    Click jQuery vault to help us help you.

  5. #5
    Join Date
    Sep 2009
    Posts
    159
    Check out the jsfiddle below although i'm guessing that's not exactly what you want.
    jsFiddle
    Got jQuery problem? jQuery vault can help you find solutions. Give it a try and find out.

    Click jQuery vault to help us help you.

  6. #6
    Join Date
    Nov 2009
    Posts
    268

    Lightbulb Get cells by className to equal innerHTML of cell id 'subtotal'

    Wow pactor21 that is close. Is that Jquerry. I'm trying to avoid using library. The other thing is I need to run the function in the deleterow function so I don't have to guess that a 'rowsubtotal' exists. I'll check it out. I'm guessing that you're using '?' javascript prototype query? There is hope then that I can do this with javascript alone?

    Today 01:12 PM pactor21 Check out the jsfiddle below although i'm guessing that's not exactly what you want.
    jsFiddle Today 12:54 PMpactor21

    Also thanks for the closing brackets stuff. I try to write my functions so that I can post and read them without forcing scroll.
    Last edited by THEFOOL; 10-21-2011 at 05:22 PM.

  7. #7
    Join Date
    Nov 2009
    Posts
    268

    Exclamation

    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
    Code:
    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
    HTML Code:
    <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.

    pactor21 any ideas on matching the innerHTML?

  8. #8
    Join Date
    Nov 2009
    Posts
    268

    resolved Get cells by className to equal innerHTML of cell id 'subtotal'

    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
    Code:
    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
    HTML Code:
    <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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles