Dynamically add the rows in table

Question

Suppose we select the row in gridview then we get the one number from gridview. Suppose we get 8 number from gridview then how to add the Eight rows in html table with textboxes. is it possible, and how it use with jquery .append(), Thanks in Advance.

Answer 1

I am not sure that I understand the question properly, but yes it is possble and very simple with jquery. Your script should look something like:

function appendTable(numberOfRows) {
        var row = '<tr><td><input type="text" class="yourInput"></td></tr>'; //you should change this for your needs
        for (var i = 0; i < numberOfRows; i++) {
            $('#yourTable').append(row);
        }
    }

Answer 2

Here is a complete example for add row and remove row :

<!DOCTYPE html>
<html>
<head>
<title>Add / Remove Row</title>
<link rel="stylesheet" type="text/css" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" 
src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".btn-add").on('click', function() {
            var singleRow = $(".singleRow").eq(0).clone();

            singleRow.find('.btn-add')
                .removeClass('btn-succcess')
                .addClass('btn-danger')
                .removeClass('btn-add')
                .addClass('remove')
                .html("X");

            singleRow.find('input').each(function(i, input) {
                $(input).val('');
            });

            $("#wrapper").append(singleRow);
        });

        $(document).on('click', ".remove", function() {
            $(this).parent().remove();
        });
    });
</script>
<style type="text/css">
    .singleRow {
        padding: 10px 0;
    }
</style>
</head>

<body>
    <div class="container">
    <form role="form" autocomplete="off" id="wrapper">
        <div class="row singleRow">
            <div class="col-md-3">
                <input class="form-control" name="name[]" type="text">
            </div>
            <div class="col-md-3">
                <input class="form-control" name="phone[]" type="text">
            </div>
            <div class="col-md-1">
                <select name="opt[]" class="form-control">
                    <option>1</option>
                    <option>2</option>
                </select>
            </div>
            <button type="button" class="btn btn-success btn-add">
                +
            </button>
        </div>
    </form>
    </div>
</body>    
</html>

Dynamically add the rows in table

Question

2 answers

solution1
3 2016-12-14 05:17:00

solution2
-1 ACCPTED 2016-12-14 06:32:18

Dynamically add the rows in table

Question

2 answers

solution1 3 2016-12-14 05:17:00

solution2 -1 ACCPTED 2016-12-14 06:32:18

solution1
3 2016-12-14 05:17:00

solution2
-1 ACCPTED 2016-12-14 06:32:18