1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

add rows calculation and add/delete rows help

Discussion in 'JavaScript' started by Ian Haney, Jan 5, 2019.

  1. #1
    I am trying to make a invoice template that will calculate the total of each row and also be able to add rows and delete rows
    SEMrush
    I have managed to do javascript that adds new rows but I can't work out how to delete the last row added and also how to calculate each row total and then calculate all the rows total, my coding so far is below

    Can anyone help please

    <form method="post" action="" name="services">
                              <button type="button" onClick="addRow()">Add New Row</button>
                            <table class="table table-sm">
                                <thead>
                                    <tr>
                                        <td><strong>Service</strong></td>
                                        <td class="text-xs-center"><strong>Service Price</strong></td>
                                        <td class="text-xs-right"><strong>Total</strong></td>
                                    </tr>
                                </thead>
                                <tbody id="maindata">
                                    <tr id="newservicerow">
                                        <td class="text-xs-center"><input type="text" pattern="[A-Za-z]" onkeydown="return /[a-z]/i.test(event.key)" onblur="if (this.value == '') {this.value = 'Type Letters Only';}" onfocus="if (this.value == 'Type Letters Only') {this.value = '';}" class="form-control" /></td>                              
                                        <td class="text-xs-center"><input type="number" min="0.01" step="0.01" name="form-control" class="form-control"/></td>
                                        <td class="text-xs-right">£ROW CALCULATION</td>
                                    </tr>
                                    </tbody>
                                    <tbody>
                                    <tr>
                                        <td class="highrow"></td>
                                        <td class="highrow"></td>
                                        <td class="highrow text-xs-right">Total: £CALCULATED FROM TOTAL ROWS ABOVE</td>
                                    </tr>
                                </tbody>
                            </table>
                            </form>
                            <script>
                          
                            function addRow() {
          // Reference the first <tr> as row
          var row = document.getElementById('newservicerow');
          // Reference the first <tbody> as main
          var main = document.getElementById('maindata');
          // Clone row
          var clone = row.cloneNode(true);
          // Remove clone's id
          clone.removeAttribute('id');
          // Clean clone of any data
          clone.querySelectorAll('input').forEach(function(inp) {
            inp.value = ''
          });
          // Append clone as the last child of main
          main.appendChild(clone);
        }
                            </script>
    HTML:
    Thank you in advance
     
    Ian Haney, Jan 5, 2019 IP
    SEMrush
  2. shofstetter

    shofstetter Active Member

    Messages:
    177
    Likes Received:
    6
    Best Answers:
    1
    Trophy Points:
    70
    #2
    What you are trying to do would be much easier if you were to use a framework like jQuery to add/remove the rows.
    From a UI standpoint it would be better to have a single row entry form, and to have the button save the contents to an array for calculation and display. When the rows are displayed you could add buttons to each row to edit or remove. These buttons could be tied to the the index of the array to recall the correct values to edit/remove.
    You could then catch the form submit event to encode the data from the array prior to submission. (If you can't modify the backend). If you can modify the backend you could simply send the array in json format, and decode it on the backend. Let me know if you still need help with this. I have done this very same thing many times before.
     
    shofstetter, Jan 31, 2019 IP