SO - 17672496

by Arun P Johny

HTML

<div id="container">
                        <div id="header"></div>

                        <div id="content">
                                <div id="search-container" style="padding:50px;border: 1px solid gray;">
                                    <table border="1" id="sample-table">
                                        <thead>
                                            <tr>  
                                                <td><b>Country</b></td>
                                                <td><b>City</b></td>
                                                <td><b>Time</b></td>
                                                <td><b>Delete</b></td>
                                            </tr>

                                        </thead><!-- End Thead-->
                                        <tbody id="tab-body">
                                                
                                        </tbody> <!-- End Tbody -->
                                    </table><!-- End Table -->
                                    <div id="button-panel" style="padding-top:35px;">
                                        <span><button  id="add-row-btn">Add Row</button></span>
                                        <span><button id="toggle-tab-btn" >Hide</button></span>
                                        <hr>
                                    </div>

                                    <div id="tbox-wrapper-div" style="padding-top:50px;">
                                        <label for="dynamic-tbox">Enter Text: </label><input type="text" placeholer="Enter Data" name="dynamic-tbox" id="dynamic-tbox" />
                                        <span><button id="add-txt-btn" >Add Text</button></span>
                                        <span><button id="remove-txt-btn">Remove Text</button></span>
                                        <div id="wrapper-contents">
                                        </div>

                         ...

JavaScript

var rowID=1;
function getrandomchar(Len,type)
{
    var rand="";
    for(var i=0;i<Len;++i)
    {
        if(type==2){
            rand+= String.fromCharCode(Math.floor(Math.random() * (122 - 97 + 1)) + 97);/*Random Char  b/w a-z*/
        }
        else if(type==1){
            rand+=Math.floor(Math.random() * (9 - 0 + 1)) + 0;/*Random digits b/w 0-9*/
        }
        else if(type==3){
            rand+=(Math.floor(Math.random() * (23 - 0 + 1)) + 0)+":"+(Math.floor(Math.random() * (59 - 0 + 1)) + 0);
        }
        else{}
    }
    return rand;
}
$(document).ready(function() {
    $("#add-row-btn").click(function() {
        
        var row_content="<tr><td>"+getrandomchar(Math.floor(Math.random() * (19 - 1 + 1)) + 1,2)+"</td><td>"+getrandomchar(Math.floor(Math.random() * (19 - 1 + 1)) + 1,2)+"</td><td>"+getrandomchar(1,3)+"</td><td><a  href='#' class='delRow' id="+rowID+">Delete</a></td></tr>";
        rowID++;
        $('#tab-body').append(row_content);
    }
                           );
    /*For Toggling the display of the table*/
    $("#toggle-tab-btn").click(function(){
        
        if(($(this).text())=="Hide")
        {
            $('#toggle-tab-btn').text("Show");
        }
        else 
        {
            $('#toggle-tab-btn').text("Hide");
        }
        $("#sample-table").toggle();
    }
                              );    
    /*Add Text Button*/
    $("#add-txt-btn").click(function() {
        var para_content="<p>"+$("#dynamic-tbox").val()+"</p>";
        $("#wrapper-contents").append(para_content);
    }
                           );    
    /*Remove Text Button*/
    $(document).on('click', ".delRow", function(){
        alert("Called");
        $(this).parents('tr').first().remove();
        
        
    }); 
    
});