jquery.dynamicTable

A library that can help you to do CRUD operations on html table.

Getting Started

Add table element to DOM

<table id="myTable" class="table table-bordered table-responsive table-striped" style="margin:0px auto auto auto;"></table>

Prerequisites

The library depends on jquery, so jquery library must be added to html file.

Setup

The parameters columns and data are compulsory. Here, getControl() function is optional.

<script
  src="http://code.jquery.com/jquery-3.2.1.slim.min.js"
  integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
  crossorigin="anonymous"></script>
  
<script src="js/jquery.dynamicTable-1.0.0.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function () {
        $("#myTable").dynamicTable({
            columns: [{
                    text: "Name",
                    key: "name"
                },
                {
                    text: "Age",
                    key: "age"
                },
                {
                    text: "Gender",
                    key: "gender"
                },
            ],
            data: [{
                    name: 'Mr. Jeff Brown',
                    age: 30,
                    gender: 'M',
                },
                {
                    name: 'Ms. Rebeca John',
                    age: 24,
                    gender: 'F',
                },
            ],
            getControl: function (columnKey) {
                if (columnKey == "age") {
                    return '<input type="number" class="form-control" />';
                }

                if (columnKey == "gender") {
                    return '<select class="form-control"><option value="M">Male</option><option value="F">Female</option></select>';
                }

                return '<input type="text" class="form-control" />';
            },
        });
    });
</script>

Getting Data

You can get data from dynamic table by just calling getTableData() function. In following example a button added to DOM with id "btnGetData". You can get data after clicking on this button.

$('#btnGetData').click(function () {
    var data = $("#myTable").getTableData();
    console.log(data);
});