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
    • 1.67k
    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;
        if(radiusVal=="")
            alert("Please enter Value")
        else if(unitVal=="Select Unit")
            alert("Please Select Unit")
        else 
        {
            //alert(radiusVal + " " + unitVal);
            document.getElementById("radiusValue").innerHTML=radiusVal;
            document.getElementById("unitValue").innerHTML=unitVal;
        }
    }
    
        
    <p>
    <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 />
    }
    </style></p>
    
    <table>
                    <tbody><tr>     
                 <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>
                </select>
                            </span>
                        </td>
                    </tr>
    </tbody></table>
    
    <p><br><br></p>
    
    <table class="bordered">
        <thead><tr><th>Unit Selected</th></tr></thead>
        <tbody>
        <tr><th id="radiusValue">Radius</th><td id="unitValue">Value</td></tr>
            </tbody>
    </table>
    
    <p>");</p>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
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: