Snippet to Dynamically add rows to a table

This code snippet will help you to add rows dynamically in a html table.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Insert Table Row using DOM</title>
<script language="javascript">
function addRow()
{
var tbody = document.getElementById("table1").getElementsByTagName("tbody")[0];
var row = document.createElement("TR");
var cell1 = document.createElement("TD");
var inp1 =? document.createElement("INPUT");
inp1.setAttribute("type","text");
inp1.setAttribute("value","New row");
cell1.appendChild(inp1);
var cell2 = document.createElement("TD");
cell2.innerHTML = "label3";
var cell3 = document.createElement("TD");
cell3.innerHTML = "label4";
row.appendChild(cell1);
row.appendChild(cell2);
row.appendChild(cell3);
tbody.appendChild(row);
//alert(row.innerHTML);
}
</script>
</head>
<body>
<tableid="table1">
<tbody>
<tr>
<td><inputtype=textvalue="Original Row"></td>
<td>label1</td>
<td> label2</td>
</tr>
</tbody>
</table>
<inputtype="button"value="Insert Row"onClick= "addRow();">
</body>
</html>

Most of the code is self explanatory, so am leaving it unexplained. If anybody needs help, post your questions, will help you.

Get computed Width of an HTML Element

This function will help you to get the computed width(actual width) of an HTML Element/Object. For example you may be using a div to show some contents inside that. But want to calculate the actual width of the div after loading the contents inside it. There comes this function to help you.
function getComputedWidth(theElt){
var browserName=navigator.appName;
if (browserName=="Microsoft Internet Explorer"){
var is_ie=true;
} else {
var is_ie=false;
}
if(is_ie){
tmphght = document.getElementById(theElt).offsetWidth;
}
else{
docObj = document.getElementById(theElt);
var tmphght1 = document.defaultView.getComputedStyle(docObj, "").getPropertyValue("width");
tmphght = tmphght1.split('px');
tmphght = tmphght[0];
}
return tmphght;
}
< div id="demo" onclick="alert(getComputedWidth('demo'));">hello there< /div>

To know the computed height of an element see here

Get computed Height of an HTML Element

This function will help you to get the computed height (actual height) of an HTML Element/Object. For example you may be using a div to show some contents inside that. But want to calculate the actual height of the div after loading the contents inside it. There comes this function to help you.


function getComputedHeight(theElt){
var browserName=navigator.appName;
if (browserName=="Microsoft Internet Explorer"){
var is_ie=true;
} else {
var is_ie=false;
}
if(is_ie){
tmphght = document.getElementById(theElt).offsetHeight;
}
else{
docObj = document.getElementById(theElt);
var tmphght1 = document.defaultView.getComputedStyle(docObj, "").getPropertyValue("height");
tmphght = tmphght1.split('px');
tmphght = tmphght[0];
}
return tmphght;
}

< div id=”demo” onclick=”alert(getComputedHeight(‘demo’));”> hello there< /div>
Thanks to Richard A who made the code complete to run as a demo.

To know the computed width of an element see here

Disable Text Selection in a web page

Here is a sample code snippet, which can be used to disable the text selection in a web page.

But selecting text inside input fields, such as Textarea, textbox and Select (combo) box is not restricted.

//get the browser name,version details
function agent(v) { return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0)); }

//variables to hold the browser names, and versions
var is_ie = false;
var is_ff15 = false;
var is_ff20 = false;
var is_ff30 = false;
if(agent('msie'))
    is_ie = true;
else if(agent('firefox/3.0.0'))
    is_ff30 = true;
else if(agent('firefox/2.0.0'))
    is_ff20 = true;
else if(agent('firefox/1.5'))
    is_ff20 = true;

/* This is the function which Disables Text Selection in the Document*/
function selstart(e){
    //if not ie and !not ie then return
    if (!agent('msie') && !(!agent('msie')))
        return;

    var selobj=(!agent('msie'))? e.target : event.srcElement
    var topelement=(!agent('msie'))? "HTML" : "BODY"

    if(agent('msie')){
        if ( selobj.tagName!=topelement &&
                (selobj.tagName=='SELECT' ||
                selobj.tagName=='TEXTAREA' ||
                selobj.tagName=='INPUT')
              ){
                  selobj.select();
                  return true;
              }
        else
            return false;
    }else{
        document.body.style.MozUserSelect='none';
        document.body.style.userSelect='none';
    }

}
document.onselectstart=selstart;

This function uses another function named agent to get the browser agent name, whether the user’s browser is Firefox or IE or others. And some global variables for storing browser names and versions.

Whenever a select text event (onselectstart) is fired, the function selstart is executed and the text selection inside the web page is restricted. The function will return true to disable text selection.

Functions find Left and Right position of an Object

When a layer is inside another layer, it’s style.left and style.top positions can both be ‘0’
but the layer itself can be 500 pixels away from the actual margin. These functions will return
the true offset.
// To find the left position, add this snippet to your code:

function getPositionLeft(This){
var el = This;var pL = 0;
while(el){pL+=el.offsetLeft;el=el.offsetParent;}
return pL
}

// To find the top position, add this snippet to your code:

function getPositionTop(This){
var el = This;var pT = 0;
while(el){pT+=el.offsetTop;el=el.offsetParent;}
return pT
}

Check whether an HTML element/Object exists or not.

This small javascript function will help you to check if a HTML object.Element exists in a page from the page itself or from a popup window.


function chkObject(inParent,theVal) {
if(inParent){
if (window.opener.document.getElementById(theVal) != null) {
return true;
} else {
return false;
}
}else{
if (document.getElementById(theVal) != null) {
return true;
} else {
return false;
}
}
}

Note:
chks whether an object exists or not in the document.
if the inParent is true then the object/elt is checked for its existence in the parent/opener’s document.
i.e., it will be useful to chk from a popup window.
To check in the current document itself , then set inParent value as false.