Search code examples
javascripthtmldynamic-tables

html javascript, multiply the values of a dynamic row


I've dynamically created rows in a table using javascript that I've altered to suit my needs, within this dynamically created table i want to multiply Qty with price and put that in the total box,

html

<table>       
    <tbody id="plateVolumes">
        <tr>
            <td><input type="checkbox" value="None" id="chk" name="chk[]" /></div></td>
            <td><input type='text' name='qty' id='qty' class="qty" placeholder='Qty' /></td>
            <td><select name="productdescription[]" class="productdescription" id="productdescription">
                <option value="Product">Product</option>
                <option value="Product01" label="Product01">Product01</option>
                <option value="Product02" label="Product02">Product02</option>
                <option value="Product03" label="Product03">Product03</option>
                <option value="Product04" label="Product04">Product04</option>
                <option value="Product05" label="Product05">Product05</option>
                <option value="Product06" label="Product06">Product06</option>
                </select></td>
            <td><input type='text' name='price[]' id='price' class="price" placeholder='Price (&pound;)' onChange="WO()" /></td>
            <td><input type='text' name='totalprice[]' id='totalprice' class="price" placeholder='Total Price&nbsp;(&pound;)' /></td>
        </tr>
    </tbody>
</table>

I am using this javascript code in order to add the values together but this will only work with the first line that isn't created by the code:

javascript

<script>
function WO() {

var qty = document.getElementById('qty').value;

var price = document.getElementById('price').value;

answer = (Number(qty) * Number(price)).toFixed(2);  

document.getElementById('totalprice').value = answer;   
}
</script>

I'm pretty new with javascript so I'm wondering if there is a way to apply this to the dynamic rows also but keep them separate for when I pass them over to my php mailer.

EDIT: I've been playing with the code and I'm a bit closer to getting the answer I need but I still don't know how to make this give me the answers that I want,

function WO() {
for (var i = 0; i < rowCount; i++) {

var qty = document.getElementsByClassName('qty').value;

var price = document.getElementsByClassName('price').value;

var answer = (Number(qty) * Number(price)).toFixed(2);

document.getElementsByClassName('totalprice[' + i + ']').innerHTML = answer;
}
}

Solution

  • this helped, I've asked a friend who's created this, just thought I'd add it in case anyone else wondered

    function WO() {
    var tbody = document.getElementById("plateVolumes");
    
    for(var i = 0; i < tbody.rows.length; i++) {
        var row = tbody.rows[i];
        var qty = row.cells[1].childNodes[0].value;
        var price = row.cells[3].childNodes[0].value;
        var answer = (Number(qty) * Number(price)).toFixed(2);
        row.cells[4].childNodes[0].value = answer;
        }
    }