Create Dynamic Table On User Selection Using Jquey/JavaScript/CSS

This tutorial is based on javascript/jquery and html. Better you have some idea in jquery and javascript before start this lesson.

Assume that there is shop and you need to add multiple parts in your form.

Let’s start with the html. First add below code in html. This will get part name, no, old serial no and new serial no for multiple add.

<div id="inHousePartTableDiv" class="border_style" style="display: block;">
        <table width="100%">
                <tr>
                    <td>Part Name</td>
                    <td><input type="text" name="inHousePartName" id="inHousePartName" /></td>
                    <td>Part No</td>
                    <td><input type="text" name="inHousePartNo" id="inHousePartNo" /></td>
                    <td>Part Serial Old</td>
                    <td><input type="text" name="inHousePartSerialOld" id="inHousePartSerialOld" /></td>
                    <td>Part Serial New</td>
                    <td><input type="text" name="inHousePartSerialView" id="inHousePartSerialView" /></td>
                    <td><button onclick="addPartsToList()" class="submitButtonStyle">Add</button></td>
                </tr>
            </table>
            
            <table width="100%" id="partListTable">
                <thead>
                    <tr>
                        <th>Part Name</th>
                        <th>Part No</th>
                        <th>Part Serial Old</th>
                        <th>Part Serial New</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="5" align="center">No Data Available</td>
                    </tr>
                </tbody>
            </table>
    </div>

Now lets display the above html table with little bit cooler. Lets add css to this table. Hope you have a knowledge on css Im used here. Please write to me if there need any clarification.

Let’s add below css,

    #partListTable{
          border: 1px solid #DFDFDF;
          background-color: #F9F9F9;
          width: 100%;
          -moz-border-radius: 3px;
          -webkit-border-radius: 3px;
          border-radius: 3px;
          color: #333;
    }
    #partListTable th {
        border-top-color: white;
        border-bottom: 1px solid #DFDFDF;
        color: #555;
    }
    #partListTable th{
        text-shadow: rgba(255, 255, 255, 0.796875) 0px 1px 0px;
        font-weight: normal;
        padding: 7px 7px 8px;
        text-align: left;
        line-height: 1.3em;
        font-size: 14px;
    }
    #partListTable td{
        font-size: 12px;
        padding: 4px 7px 2px;
        vertical-align: top;
    }

Now let’s move to javascript and jquery stuffs. First we need to create objects on parts. Then we can add multiple object to this table. To do this we need a javascript array and object creation function. This mechanism also will help you to bring these data back to the back end of your system. We will move on to back end level development later. Below you can see the part object creation function and the object array.

var dynamic_part_array = new Array();

    //creating parts object
    function part(name, no, olds, news){        
        this.partName = name;
        this.partNo = no;
        this.partSerialOld = olds;
        this.partSerialNew = news;
    }

We don’t need duplicate part objects need to be added to our table. So we can make sure part no is unique and remove duplicates using part no matching. We could use below function to do that. We have searched our previously created array before entering a new part.

//check part in exist table
    function checkPartInExistTable(partNo ){
        for(var i=0; i<dynamic_part_array.length; i++){
            if(dynamic_part_array[i].partNo  == partNo ){
                return false;
            }
        }
        return true;
    }

Now we need another function to remove parts from our table. Otherwise our table become bit less user friendliness. It’s ok you cannot understand the flow of this lesson. Later we will add these functions together and make nice dynamic table. Now add below function to remove the added parts from the table

//remove part from the accessory list
    function removeFromPartList(tableRowID){
        for(var i=0; i<dynamic_part_array.length; i++){
            if(dynamic_part_array[i].partNo == tableRowID){
                dynamic_part_array.splice(i,1);
            }
        }
        printPartObjectArray(dynamic_part_array);
    }

Now add below function to print the object array we created beginning of the lesson. Im creating dynamic html and added to the html table we created previously.

//print parts
    function printPartObjectArray(objectArray){
        $('#partListTable tbody').html('');
        for(var i=0; i<objectArray.length; i++){
            var newRow = "<tr id='"+objectArray[i].partNo+"'><td>"+objectArray[i].partName+"</td><td>"+objectArray[i].partNo+"</td><td>"+objectArray[i].partSerialOld+"</td><td>"+objectArray[i].partSerialNew+"</td><td><button class=\"submitButtonStyle\" onclick=\"removeFromPartList('"+objectArray[i].partNo+"')\">remove</button></td>";

            $("#partListTable").append(newRow); 
        }
    }

Let create our main function. In this function we are capturing user entered values and validate before enter to the dynamic array. Then after validated checks the if the entered values are duplicated in the array. If not added to the array and print the array. At the end of the function we make sure to empty the user entered fields.
 Main function is,

//add products to a list
    function addPartsToList(){
        var partName = $("#inHousePartName").val();
        var partNo = $("#inHousePartNo").val();
        var partSerialOld = $("#inHousePartSerialOld").val();
        var partSerialNew = $("#inHousePartSerialView").val();

        //validate field
        if(partName == null || partName == ''){
            $("#inHousePartName").css("background-color", "#F8B4BD");
            return false;
        }else if(partNo == null || partNo == ''){
            $("#inHousePartNo").css("background-color", "#F8B4BD");
            return false;
        }else if(partSerialOld == null || partSerialOld == '' ){
            $("#inHousePartSerialOld").css("background-color", "#F8B4BD");
            return false;
        }else if(partSerialNew == null || partSerialNew == '' ){
            $("#inHousePartSerialView").css("background-color", "#F8B4BD");
            return false;
        }

        //check part in exist in the table
        if(!checkPartInExistTable(partNo)){
            return false;
        }
        
        //add part object to the dynamic_part_array
        dynamic_part_array.push(new part(partName, partNo, partSerialOld, partSerialNew));

        //print dynamic_part_array in the table
        printPartObjectArray(dynamic_part_array);

        //clear field value
        $("#inHousePartName").val("");$("#inHousePartNo").val("");$("#inHousePartSerialOld").val("");$("#inHousePartSerialView").val("");

    }

Above code is very flexible and easy to use in your development. Please contact me or add a comment on more clarifications. I will enter full working source code below.

Copy and paste below code in a text file and save it as html. run it on different browsers. It worked all the main browsers like firefox, chrome, IE , Opera.. I didn't test on other browsers.
Note: I have import jquery on a hosted url. Change it as you prefered.

Use it Change it.

Wish you success.

<html>
    <title>dynamic table</title>
    <header>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
    
        <style ty>
            #partListTable{
            border: 1px solid #DFDFDF;
            background-color: #F9F9F9;
            width: 100%;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            color: #333;
            }
            #partListTable th {
                border-top-color: white;
                border-bottom: 1px solid #DFDFDF;
                color: #555;
            }
            #partListTable th{
                text-shadow: rgba(255, 255, 255, 0.796875) 0px 1px 0px;
                font-weight: normal;
                padding: 7px 7px 8px;
                text-align: left;
                line-height: 1.3em;
                font-size: 14px;
            }
            #partListTable td{
                font-size: 12px;
                padding: 4px 7px 2px;
                vertical-align: top;
            }

        </style>
        
        <script type="text/javascript">

            var dynamic_part_array = new Array();

                //creating parts object
                function part(name, no, olds, news){        
                    this.partName = name;
                    this.partNo = no;
                    this.partSerialOld = olds;
                    this.partSerialNew = news;
                }

                //add products to a list
                function addPartsToList(){
                    var partName = $("#inHousePartName").val();
                    var partNo = $("#inHousePartNo").val();
                    var partSerialOld = $("#inHousePartSerialOld").val();
                    var partSerialNew = $("#inHousePartSerialView").val();

                    //validate field
                    if(partName == null || partName == ''){
                        $("#inHousePartName").css("background-color", "#F8B4BD");
                        return false;
                    }else if(partNo == null || partNo == ''){
                        $("#inHousePartNo").css("background-color", "#F8B4BD");
                        return false;
                    }else if(partSerialOld == null || partSerialOld == '' ){
                        $("#inHousePartSerialOld").css("background-color", "#F8B4BD");
                        return false;
                    }else if(partSerialNew == null || partSerialNew == '' ){
                        $("#inHousePartSerialView").css("background-color", "#F8B4BD");
                        return false;
                    }

                    //check part in exist in the table
                    if(!checkPartInExistTable(partNo)){
                        return false;
                    }
                    
                    //add part object to the dynamic_part_array
                    dynamic_part_array.push(new part(partName, partNo, partSerialOld, partSerialNew));

                    //print dynamic_part_array in the table
                    printPartObjectArray(dynamic_part_array);

                    //clear field value
                    $("#inHousePartName").val("");$("#inHousePartNo").val("");$("#inHousePartSerialOld").val("");$("#inHousePartSerialView").val("");

                }

                //print parts
                function printPartObjectArray(objectArray){
                    $('#partListTable tbody').html('');
                    for(var i=0; i<objectArray.length; i++){
                        var newRow = "<tr id='"+objectArray[i].partNo+"'><td>"+objectArray[i].partName+"</td><td>"+objectArray[i].partNo+"</td><td>"+objectArray[i].partSerialOld+"</td><td>"+objectArray[i].partSerialNew+"</td><td><button class=\"submitButtonStyle\" onclick=\"removeFromPartList('"+objectArray[i].partNo+"')\">remove</button></td>";
                        $("#partListTable").append(newRow); 
                    }
                }

                //remove part from the accessory list
                function removeFromPartList(tableRowID){
                    for(var i=0; i<dynamic_part_array.length; i++){
                        if(dynamic_part_array[i].partNo == tableRowID){
                            dynamic_part_array.splice(i,1);
                        }
                    }
                    printPartObjectArray(dynamic_part_array);
                }

                //check part in exist table
                function checkPartInExistTable(partNo ){
                    for(var i=0; i<dynamic_part_array.length; i++){
                        if(dynamic_part_array[i].partNo  == partNo ){
                            return false;
                        }
                    }
                    return true;
                }

            </script>
    </header>
    <body>
    
    <div id="inHousePartTableDiv" class="border_style" style="display: block;">
        <table width="100%">
                <tr>
                    <td>Part Name</td>
                    <td><input type="text" name="inHousePartName" id="inHousePartName" /></td>
                    <td>Part No</td>
                    <td><input type="text" name="inHousePartNo" id="inHousePartNo" /></td>
                    <td>Part Serial Old</td>
                    <td><input type="text" name="inHousePartSerialOld" id="inHousePartSerialOld" /></td>
                    <td>Part Serial New</td>
                    <td><input type="text" name="inHousePartSerialView" id="inHousePartSerialView" /></td>
                    <td><button onclick="addPartsToList()" class="submitButtonStyle">Add</button></td>
                </tr>
            </table>
            
            <table width="100%" id="partListTable">
                <thead>
                    <tr>
                        <th>Part Name</th>
                        <th>Part No</th>
                        <th>Part Serial Old</th>
                        <th>Part Serial New</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="5" align="center">No Data Available</td>
                    </tr>
                </tbody>
            </table>
    </div>
    
    </body>
</html>