Friday, August 21, 2015

How to append new dynamic row in dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input looping</title>
</head>
<body>
<div class="container">
    <div id="row">
        item 1:<input type="text" name="" id="">
        quantity 1: <input type="text" name="" id="">
        amount 1: <input type="text" name="" id=""><br><br>
        <input type="hidden" name="" id="count" value="1">
    </div>
    <button onclick="add_row()">Add row</button>
    <script>

        function add_row(){
            var count = parseInt(document.getElementById('count').value) + 1;
            var row = document.getElementById('row');
            var row_innerHTML = row.innerHTML;
            var input_html = '<div id="row"> item '+ count +':<input type="text" name="" id=""> quantity '+ count +': <input type="text" name="" id=""> amount '+ count +': <input type="text" name="" id=""><br><br> </div>';
            row.innerHTML = row_innerHTML + "<br>" + input_html;
            document.getElementById('count').value = count;
        }
    </script>
</div>
</body>
</html>

No comments:

Post a Comment

css snippet for blogger code highlighting

code, .code {     display: block;     background: beige;     padding: 10px;     margin: 8px 15px; }