Wednesday, February 1, 2012

Freeze Row and Header of a HTML Table

This post helps to freeze the header row and first column of a HTML table using java script.

Below is the sample html page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<style type="text/css">
/* Div container to wrap the datagrid */
div#div-datagrid
{
height: 200px;
overflow: auto;
}
</style>
<script type="text/javascript">
function freeze() {
freezeRow1Col1('tbl', 'tblRow1Col1', 'tr_header');
freezeColumnHeader('tbl', 'tblColumnHeader', 'tr_header');
freezeRowHeader('tbl', 'tblRowHeader', 'tr_header');

}
function freezeRow1Col1(srctbl, desttbl, trhdrid) {
var tbl1 = document.getElementById(srctbl);
var tbh1 = document.getElementById(desttbl);
var tr1 = document.getElementById(trhdrid);
var pr = tbl1.parentNode;
var newTr = document.createElement("tr");
var newTd = document.createElement("td");
if (tr1 == null) return;
var td = tr1.childNodes(0);
for (j = 0; j < td.attributes.length; j++)
if (td.attributes(j).value != "null" && td.attributes(j).value != "") {
if (td.attributes(j).name.toUpperCase() == "NOWRAP" || td.attributes(j).value.toUpperCase() == "FALSE")
continue;
newTd.setAttribute(td.attributes(j).name, td.attributes(j).value);
newTd.width = td.style.width;
newTd.height = (td.clientHeight - 2) + 'px';
newTd.innerHTML = td.innerHTML;
}
newTr.appendChild(newTd);
tblRow1Col1.childNodes(0).appendChild(newTr);
td.parentNode.removeChild(td);
}
function freezeRowHeader(srctbl, desttbl, trhdrid) {
var tbl1 = document.getElementById(srctbl);
var tbh1 = document.getElementById(desttbl);
var tr1 = document.getElementById(trhdrid);
tbh1.parentNode.style.width = tbl1.parentNode.clientWidth + 'px';
if (tr1==null)return;
var newTr = document.createElement("tr");
for (i = 0; i < tr1.childNodes.length; i++) {
var newTd = document.createElement("td");
var td = tr1.childNodes(i);
for (j = 0; j < td.attributes.length; j++)
if (td.attributes(j).value != "null" && td.attributes(j).value != "") {
if (td.attributes(j).name.toUpperCase() == "NOWRAP" || td.attributes(j).value.toUpperCase() == "FALSE")
continue;
newTd.setAttribute(td.attributes(j).name, td.attributes(j).value);
}
newTd.style.width = td.style.width;
newTd.innerHTML = td.innerHTML;
newTr.appendChild(newTd);
}
tbh1.childNodes(0).appendChild(newTr);
tr1.parentNode.removeChild(tr1);
}

function freezeColumnHeader(srctbl, desttbl, trhdrid) {
var tbl1 = document.getElementById(srctbl);
var tbh1 = document.getElementById(desttbl);
var pr = tbl1.parentNode;
var trs = tbl1.getElementsByTagName("tr");
for (i = 0; i < trs.length; i++) {
if (trs[i].id == trhdrid)
continue;
var newTr = document.createElement("tr");
var newTd = document.createElement("td");
var td = trs[i].getElementsByTagName("td")[0];
for (j = 0; j < td.attributes.length; j++)
if (td.attributes(j).value != "null" && td.attributes(j).value != "") {
if (td.attributes(j).name.toUpperCase() == "NOWRAP" || td.attributes(j).value.toUpperCase() == "FALSE")
continue;
newTd.setAttribute(td.attributes(j).name, td.attributes(j).value);
}
newTd.style.width = td.style.width;
newTd.innerHTML = td.innerHTML;
newTr.appendChild(newTd);
tbh1.childNodes(0).appendChild(newTr);
td.parentNode.removeChild(td);
tbh1.parentNode.style.height = tbl1.parentNode.clientHeight + 'px';
}
}
function rowHeaderScroll(obj) {
document.getElementById('div1').scrollLeft = obj.scrollLeft;
document.getElementById('div1').scrollTop = obj.scrollTop;
document.getElementById('div2').scrollLeft = obj.scrollLeft;
document.getElementById('div2').scrollTop = obj.scrollTop;
}
</script>
</head>
<body>
<form id="form1" runat="server">

<input type="button" name="btnFreeze" value="Freeze" onclick="freeze();" />
<table>
<tr>
<td>
<div id="div3" style="overflow: hidden;">

<table id="tblRow1Col1" border="1">
</table>
</div>
</td>
<td>
<div id="div1" style="overflow: hidden;" >

<table id="tblRowHeader" border="1" style="table-layout: fixed;" >
</table>
</div>
</td>
</tr>
<tr>
<td style="vertical-align: top">
<div id="div2" style="overflow: hidden">

<table id="tblColumnHeader" border="1">
</table>
</div>
</td>
<td>
<!--Note width specified in this below tag (800px) is used while calculating. changing this value will reflect in UI -->

<div id="div-datagrid" onscroll="rowHeaderScroll(this);" style="width:400px;">

<table id="tbl" border="1" style="table-layout: fixed;">
<tr id="tr_header">
<td style="width:100px">
Row1 Col1
</td>
<td style="width:100px">
Header 1
</td>
<td style="width:100px">
Header 2
</td>
<td style="width:100px">
Header 3
</td>
<td style="width:75px">
Header 4
</td>
<td style="width:75px">
Header 5
</td>
<td style="width:75px">
Header 6
</td>
<td style="width:75px">
Header 7
</td>
<td style="width:75px">
Header 8
</td>
</tr>
<tr>
<td style="width:100px">
Rec 1
</td>
<td style="width:100px">
Last Name
</td>
<td style="width:100px">
Address 1
</td>
<td style="width:100px">
Address 2
</td>
<td style="width:75px">
City
</td>
<td style="width:75px">
State
</td>
<td style="width:75px">
Zip Code
</td>
<td style="width:75px">
Phone
</td>
<td style="width:75px">
Email
</td>
</tr>
<tr>
<td >
Rec 2
</td>
<td >
Last Name
</td>
<td >
Address 1
</td>
<td >
Address 2
</td>
<td >
City
</td>
<td >
State
</td>
<td >
Zip Code
</td>
<td >
Phone
</td>
<td >
Email
</td>
</tr>
<tr>
<td >
Rec 3
</td>
<td >
Last Name
</td>
<td >
Address 1
</td>
<td >
Address 2
</td>
<td >
City
</td>
<td >
State
</td>
<td >
Zip Code
</td>
<td >
Phone
</td>
<td >
Email
</td>
</tr>
<tr>
<td >
Rec 4
</td>
<td >
Last Name
</td>
<td >
Address 1
</td>
<td >
Address 2
</td>
<td >
City
</td>
<td >
State
</td>
<td >
Zip Code
</td>
<td >
Phone
</td>
<td >
Email
</td>
</tr>
<tr>
<td >
Rec 5
</td>
<td >
Last Name
</td>
<td >
Address 1
</td>
<td >
Address 2
</td>
<td >
City
</td>
<td >
State
</td>
<td >
Zip Code
</td>
<td >
Phone
</td>
<td >
Email
</td>
</tr>
<tr>
<td >
Rec 6
</td>
<td >
Last Name
</td>
<td >
Address 1
</td>
<td >
Address 2
</td>
<td >
City
</td>
<td >
State
</td>
<td >
Zip Code
</td>
<td >
Phone
</td>
<td >
Email
</td>
</tr>
<tr>
<td >
Rec 7
</td>
<td >
Last Name
</td>
<td >
Address 1
</td>
<td >
Address 2
</td>
<td >
City
</td>
<td >
State
</td>
<td >
Zip Code
</td>
<td >
Phone
</td>
<td >
Email
</td>
</tr>
<tr>
<td >
Rec 8
</td>
<td >
Last Name
</td>
<td >
Address 1
</td>
<td >
Address 2
</td>
<td >
City
</td>
<td >
State
</td>
<td >
Zip Code
</td>
<td >
Phone
</td>
<td >
Email
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</form>
</body>
</html>
Row1 Col1 Header 1 Header 2 Header 3 Header 4 Header 5 Header 6 Header 7 Header 8
Rec 1 Last Name Address 1 Address 2 City State Zip Code Phone Email
Rec 2 Last Name Address 1 Address 2 City State Zip Code Phone Email
Rec 3 Last Name Address 1 Address 2 City State Zip Code Phone Email
Rec 4 Last Name Address 1 Address 2 City State Zip Code Phone Email
Rec 5 Last Name Address 1 Address 2 City State Zip Code Phone Email
Rec 6 Last Name Address 1 Address 2 City State Zip Code Phone Email
Rec 7 Last Name Address 1 Address 2 City State Zip Code Phone Email
Rec 8 Last Name Address 1 Address 2 City State Zip Code Phone Email
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)