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>