Dynamic Numbering After Insert or Delete table row.

Previously I have made ​​a post about create dynamic form control using jquery https://imron02.wordpress.com/2014/02/10/jquery-dynamic-form-control/ and now I will create post about create dynamic numbering after insert or delete table row. Okay straight to the steps:

  1. First create html file like this:
    <html>
    <head>
        <title>Dynamic Form</title>
        <script src='http://code.jquery.com/jquery-latest.min.js'></script>
    </head>
    <body>
    <div id="insert">
        <input type="text" id="textValue" />
        <button type="button" id="addBtn">Add</button>
    </div>
    <br />
    <table border="1" cellpadding="10" id="tableField">
        <thead>
            <tr>
                <th>No</th>
                <th>Value</th>
                <th>Options</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    </body>
    </html>
    
  2. After that now we make a template to be added (append) to tbody table:
    <tbody></tbody>
    </table>
    
    <script id="template" type="text/template">
    	<tr> 
    	    <td class="id"></td> 
    	    <td class="rowValue"></td>
    	    <td><a href='#' class="delRow">Delete</a></td>
    	</tr> 
    </script>
    </body>
    </html>
    
  3. And now if we run the code, we can get result like this:
  4. And it is time to write the jquery code :D, first we made code for update row number.
    <script id="template" type="text/template">
        <tr>
            <td class="id"></td>
            <td class="rowValue"></td>
            <td><a href='#' class="delRow">Delete</a></td>
        </tr>
    </script>
    
    <script type="text/javascript">
    $(function () {
        /* function for dynamic numbering */
        function updateRowOrder() {
            $('td.id').each(function (i) {
                $(this).text(i + 1);
            });
        }
    
    });
    </script>
    </body>
    </html>
    

    Explanations:

    • Line 31. That is function document ready from jquery. So the code is in this function will be used when the document is ready
    • Line 33. I create function, this function is specially made to create dynamic numbering
    • Line 34 – 35. I use looping from tag td with id=”id” (line 25), and I insert looping numbering with the addition of 1 point. So the td will get number 1,2,3,4 and so on.
  5. And now we must add some code to trigger if click add button
    <body>
    <div id="insert">
        <input type="text" id="textValue" />
        <button type="button" id="addBtn">Add</button>
    </div>
    <br />
    <table border="1" cellpadding="10" id="tableField">
        <thead>
            <tr>
                <th>No</th>
                <th>Value</th>
                <th>Options</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    
    <script id="template" type="text/template">
        <tr>
            <td class="id"></td>
            <td class="rowValue"></td>
            <td><a href='#' class="delRow">Delete</a></td>
        </tr>
    </script>
    
    <script type="text/javascript">
    $(function () {
        /* function for dynamic numbering */
        function updateRowOrder() {
            $('td.id').each(function (i) {
                $(this).text(i + 1);
            });
        }
    
        $(document).on("click", "#addBtn", function (e) {
            /* if document clicked is addBtn */
            /* Append template script to table tbody */
            $($("#template").html()).appendTo("#tableField tbody");
    
            /* Append textValue value to class rowValue and change classname */
            $(".rowValue").append($("#textValue").val()).attr("class", "rowValues");
            /* Update Numbering */
            updateRowOrder();
            
            /* clearing input textValue */
            $("#textValue").val("");
        });
    });
    </script>
    </body>
    </html>
    

    Explanations:

    • Line 40. That is a function if button with id addBtn clicked (line 9).
    • Line 43. That code is for append/insert template with id=’template” (line 23) and insert into tbody from table with id tableField (line 12).
    • Line 46. That code is for insert value from text input with id textValue (line 8) and insert into class rowValue (line 26)
    • Line 48. We call function updateRowOver (line 34)
    • Line 51 is for clearing input text
  6. And now if we run that code and we add some value, we can get result like this:
  7. Oke from the code we create link with name is delete. So for what that? The delete is created if we click this link, so we can remove this row (only the clicked row). So we must change code to be like this:
    $(document).on("click", "#addBtn, .delRow", function (e) {
            /* if document clicked is addBtn */
            if ($(this).is("#addBtn")) {
                /* Append template script to table tbody */
                $($("#template").html()).appendTo("#tableField tbody");
                /* Append textValue value to class rowValue and change classname */
                $(".rowValue").append($("#textValue").val()).attr("class", "rowValues");
                /* Update Numbering */
                updateRowOrder();
            } else {
                /* Just remove the tr on the click of a mouse */
                $(this).closest("tr").remove();
                /* Update Numbering */
                updateRowOrder();
            }
            /* clearing input textValue */
            $("#textValue").val("");
        });
    
  8. And the last is a bonus. So this code if entered keyboard is pressed.
    /* function for dynamic numbering */
        function updateRowOrder() {
            $('td.id').each(function (i) {
                $(this).text(i + 1);
            });
        }
        
        /* if input textValue get press keyboard enter */
        $("#textValue").keydown(function (e) {
            if (e.keyCode == 13) {
                /* if get so trigger to addBtn */
                $("#addBtn").trigger("click");
                $(this).val("");
            }
        });
    

And the end of this post is a full source code:

<html>
<head>
    <title>Dynamic Form</title>
    <script src='http://code.jquery.com/jquery-latest.min.js'></script>
</head>
<body>
<div id="insert">
    <input type="text" id="textValue" />
    <button type="button" id="addBtn">Add</button>
</div>
<br />
<table border="1" cellpadding="10" id="tableField">
    <thead>
        <tr>
            <th>No</th>
            <th>Value</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

<script id="template" type="text/template">
    <tr>
        <td class="id"></td>
        <td class="rowValue"></td>
        <td><a href='#' class="delRow">Delete</a></td>
    </tr>
</script>

<script type="text/javascript">
$(function () {
    /* function for dynamic numbering */
    function updateRowOrder() {
        $('td.id').each(function (i) {
            $(this).text(i + 1);
        });
    }
 
    /* function for dynamic numbering */
    function updateRowOrder() {
        $('td.id').each(function (i) {
            $(this).text(i + 1);
        });
    }

    $(document).on("click", "#addBtn, .delRow", function (e) {
        /* if document clicked is addBtn */
        if ($(this).is("#addBtn")) {
            /* Append template script to table tbody */
            $($("#template").html()).appendTo("#tableField tbody");
            /* Append textValue value to class rowValue and change classname */
            $(".rowValue").append($("#textValue").val()).attr("class", "rowValues");
            /* Update Numbering */
            updateRowOrder();
        } else {
            /* Just remove the tr on the click of a mouse */
            $(this).closest("tr").remove();
            /* Update Numbering */
            updateRowOrder();
        }
        /* clearing input textValue */
        $("#textValue").val("");
    });

});
</script>
</body>
</html>

And this is online result: http://jsfiddle.net/imron02/JwHEh/ Or http://jsfiddle.net/imron02/JwHEh/embedded/result/

Advertisements