Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
  • Filling Values in a html table dynamically

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 3.16k
    Comment on it

    How to enter values in html table dynamically

    Filling Values in a html table dynamically

    //Below is the program to create a table structure dynamically.
    //Input is taken from the User in 'Radius' TextBox and Unit is selected from 'Select Unit' Drop Down
    // The input is then populated in a table.If no input is entered or correct unit is not selected in the drop    down, a message is displayed to the user.
    // 'Alert' is the keyword to display message popup.
    // 'Document.getElementById' is used to find any element/control in the page. 
    // 'Document.getElementById(control).value' is used for getting text value of the control.
    // In html file a table is created with <table> tag and <tr> is tag to create rows and <td> for columns
    // A textbox is added using '<input type="text"' and 'dropdown using '<select>' . The different items in dropdown is addded using '<option>' tag.
    // When an item is changed/selected from the dropdown, 'onchange' event is fired which here is calling function 'unitSelected()'
    // which checks for valid entries in the controls and displays those values in the <table>
    print("<script type="text/javascript">
    function unitSelected()
        var unit = document.getElementById("unit");
        var unitVal = unit.options[unit.selectedIndex].value;
        var radiusVal=document.getElementById("radius").value;
            alert("Please enter Value")
        else if(unitVal=="Select Unit")
            alert("Please Select Unit")
            //alert(radiusVal + " " + unitVal);
    <style type="text/css">
    .bordered {
        border: solid #ccc 1px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border-radius: 6px;
        -webkit-box-shadow: 0 1px 1px #ccc; 
        -moz-box-shadow: 0 1px 1px #ccc; 
        box-shadow: 0 1px 1px #ccc; <br />
                 <td style="vertical-align: top;"> <label for="radius">Radius</label> <input name="radius" id="radius" type="text"> </td>              
                        <td style="vertical-align: top;">
                            <span style="float: right; margin-top: 0px !important;">
                                 <select name="unit" id="unit" style="width: 162px;" onchange="unitSelected();">
                    <option value="Select Unit">Select Unit</option>
                    <option value="mile">Mile</option>
                    <option value="kilometer">Kilometer</option>
                    <option value="yard">Yard</option>
                    <option value="meter">Meter</option>
    <table class="bordered">
        <thead><tr><th>Unit Selected</th></tr></thead>
        <tr><th id="radiusValue">Radius</th><td id="unitValue">Value</td></tr>

 0 Comment(s)

Sign In

Sign up using

Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: