|
I figured I would post my solution to the following.
Resizable column tables.
Search and replace values in a table. (IE only)
Scrollable tables.
Sortable tables.
It is based on a lot examples I found on the web. Works in IE and mozilla. http://www.imaputz.com/cssStuff/bigFourVersion.html http://www.thescripts.com/forum/thre...resizable.html http://www.kryogenix.org/code/browser/sorttable/
Todo.
Resize table.
Search and replace values in Mozilla.
Any suggestions or examples on the todo list would be greatly appreciated.
find.html
-------------------------------------- -
<HTML>
-
<HEAD>
-
<TITLE>Find/Replace</TITLE>
-
<script type="text/javascript">
-
<!--
- var inputTags = null;
-
var found = false;
-
var currentInputIdx = 0;
-
var currentTextRange = null;
-
var currentSearchVal = null;
-
-
function initFind(){
-
inputTags = new Array();
-
var tags = opener.document.getElementsByTagName("input");
-
if(tags != null){
-
for(i = 0; i < tags.length;++i){
-
if(tags[i].type == "text"){
-
inputTags[inputTags.length] = tags[i];
-
}
-
}
-
}
-
-
tags = opener.document.getElementsByTagName("textarea");
-
if(tags != null){
-
for(i = 0; i < tags.length;++i){
-
inputTags[inputTags.length] = tags[i];
-
}
-
}
-
}
-
-
// returns a calculated value for matching case and
-
// matching whole words
-
function searchType(){
-
var retval = 0;
-
var matchcase = 0;
-
var matchword = 0;
-
if (document.forms[0]['blnMatchCase'].checked) matchcase = 4;
-
if (document.forms[0]['blnMatchWord'].checked) matchword = 2;
-
retval = matchcase + matchword;
-
return(retval);
-
}
-
-
function replaceText(){
-
-
// if no current tag then find one
-
if(currentTextRange == null) {
-
findText();
-
}
-
// if we have one then replace
-
else if(currentTextRange != null){
-
var beforeBookmark = currentTextRange.getBookmark();
-
var replaceStr = document.forms[0]['replaceStr'].value;
-
currentTextRange.text=replaceStr;
-
pushUndoNew(currentTextRange, beforeBookmark, currentSearchStr, replaceStr);
-
currentTextRange.collapse(false);
-
findText();
-
}
-
}
-
-
function replaceAllText(){
-
found = false;
-
if(currentTextRange == null) findText();
-
-
while(currentTextRange != null){
-
replaceText();
-
}
-
}
-
-
function findText(){
-
if(inputTags == null) initFind();
-
-
if (document.forms[0]['searchStr'].value.length < 1) {
-
alert("Please enter text in the \"Find what:\" field.");
-
return;
-
}
-
-
if(inputTags.length == 0){
-
alert("No input field(s) found on page");
-
return;
-
}
-
-
var searchVal = currentSearchStr = document.forms[0]['searchStr'].value;
-
-
var useRegex = document.forms[0]['blnRegex'].checked;
-
-
if( currentTextRange == null) {
-
currentTextRange = inputTags[currentInputIdx].createTextRange();
-
if(useRegex) currentText = currentTextRange.text;
-
}
-
else {
-
currentTextRange.collapse(false);
-
// get the remaining search range for regex
-
if(useRegex){
-
var rng = currentTextRange.duplicate();
-
rng.collapse(false);
-
rng.moveEnd("textedit");
-
currentText = rng.text;
-
}
-
-
}
-
-
var match = true;
-
-
if(useRegex){
-
try{
-
var matches = currentText.match(new RegExp(searchVal));
-
if(matches){
-
currentSearchStr = matches[0];
-
}
-
else {
-
match = false;
-
}
-
}
-
catch(e){
-
alert("Illegal Regex: '" + searchVal + "'");
-
return;
-
}
-
}
-
-
var type = searchType();
-
-
// found a match within the current text field
-
if( match && currentTextRange.findText(currentSearchStr, 10000, type)){
-
currentTextRange.select();
-
inputTags[currentInputIdx].scrollIntoView(false);
-
currentTextRange.scrollIntoView();
-
found = true;
-
}
-
// no match found and end of the document
-
else if( currentInputIdx >= inputTags.length-1 ){
-
currentTextRange = null;
-
currentInputIdx = 0;
-
if(found) alert("Done!");
-
else alert("Can not find '" +searchVal +"'");
-
found = false;
-
}
-
// no match found in the current text, look at the next text field
-
else{
-
currentTextRange = null;
-
++currentInputIdx;
-
findText();
-
}
-
}
-
-
// BEGIN UNDO BUFFER CODE
-
// buffer global variables
-
var undoStack = new Array();
-
-
// UndoState Object
-
function UndoState(textRange,searchStr,inputIdx,beforeBookmark, afterBookmark){
-
this.textRange = textRange;
-
this.searchStr = searchStr;
-
this.inputIdx = inputIdx;
-
/* two bookmarks are necessary to get back to the before and after state */
-
this.afterBookmark = afterBookmark;
-
this.beforeBookmark = beforeBookmark;
-
}
-
-
// store original search string and bookmarks of each replaced range
-
function pushUndoNew(rng, beforeBookmark,searchStr, replaceStr) {
-
currentTextRange.moveStart("character", -replaceStr.length);
-
undoStack[undoStack.length] = new UndoState( currentTextRange,searchStr,currentInputIdx,beforeBookmark,currentTextRange.getBookmark() );
-
}
-
-
// perform the undo
-
function undoReplace() {
-
if (undoStack.length) {
-
var newLength = undoStack.length-1;
-
currentTextRange = undoStack[newLength].textRange;
-
currentTextRange.moveToBookmark( undoStack[newLength].afterBookmark );
-
-
currentTextRange.text = undoStack[newLength].searchStr;
-
currentTextRange.moveToBookmark( undoStack[newLength].beforeBookmark );
-
-
// reselect the undo
-
currentTextRange.findText(undoStack[newLength].searchStr, 10000);
-
currentTextRange.select();
-
currentTextRange.scrollIntoView();
-
-
currentInputIdx = undoStack[newLength].inputIdx;
-
undoStack.length=newLength;
-
}
-
}
-
-
//-->
- </script>
-
</HEAD>
-
<BODY bgcolor="#EAF4F3">
-
<FORM NAME="frmSearch" method="post" action="">
-
<table CELLSPACING="0" cellpadding="5" border="0">
-
<tr><td VALIGN="top" align="left" nowrap
-
style="font-family:Arial; font-size:11px;">
-
<label for="searchStr" accesskey="n"><u>F</u>ind what:</label><br>
-
<INPUT TYPE="TEXT" SIZE=40 NAME="searchStr"
-
id="searchStr" style="width:280px;"><br>
-
<label for="replaceStr" accesskey="n"><u>R</u>eplace with:</label><br>
-
<INPUT TYPE="TEXT" SIZE=40 NAME="replaceStr"
-
id="replaceStr" style="width:280px;"><br>
-
-
<INPUT TYPE="Checkbox" NAME="blnMatchCase" id="blnMatchCase">
-
<label for="blnMatchCase">Match case</label><br>
-
-
<INPUT TYPE="Checkbox" NAME="blnMatchWord" ID="blnMatchWord">
-
<label for="blnMatchWord">Match whole word only</label>
-
-
<INPUT TYPE="Checkbox" NAME="blnRegex" ID="blnRegex">
-
<label for="blnRegex">Use regular expression</label>
-
-
</td>
-
<td rowspan="2" valign="top">
-
<button name="btnFind" accesskey="f" onClick="findText();"
-
style="width:75px; height:22px; font-family:Tahoma;
-
font-size:11px; margin-top:15px"><u>F</u>ind Next</button><br>
-
-
<button name="btnReplace" accesskey="r" onClick="replaceText();"
-
style="width:75px; height:22px; font-family:Tahoma;
-
font-size:11px; margin-top:15px"><u>R</u>eplace</button>
-
-
<button name="btnReplaceAll" accesskey="a" onClick="replaceAllText();"
-
style="width:75px; height:22px; font-family:Tahoma;
-
font-size:11px; margin-top:15px">Replace <u>A</u>ll</button><br>
-
-
<button name="btnUndo" onClick="undoReplace();"
-
style="width:75px; height:22px; font-family:Tahoma;
-
font-size:11px; margin-top:15px">Undo</button><br>
-
-
<button name="btnCancel" onClick="window.close();"
-
style="width:75px; height:22px; font-family:Tahoma;
-
font-size:11px; margin-top:7px">Close</button><br>
-
</td></tr>
-
</table>
-
</FORM>
-
</BODY>
-
</HTML>
-
main page.
------------------------------------ -
h1, h2{
-
font-family:Verdana, Arial, Helvetica, sans-serif;
-
font-size:13px;
-
-
}
-
-
</style>
-
<!--[if IE]>
-
<style type="text/css">
-
div.scrollable {
-
/* shrink the window */
-
height:expression( this.getElementsByTagName('TABLE')[0].clientHeight >= parseInt(this.getElementsByTagName('TBODY')[0].style.height) && parseInt(this.getElementsByTagName('TBODY')[0].style.height) > 0 ? this.getElementsByTagName('TBODY')[0].style.height : "auto" );
-
overflow-x: visible;
-
overflow-y: auto;
-
width: expression(this.getElementsByTagName('TABLE')[0].offsetWidth);
-
}
-
-
/* set the table row */
-
div.scrollable table thead tr {
-
position: relative;
-
/* this fixes IE header jumping bug, adjust for the table border */
-
top: expression( (this.parentNode.parentNode.parentNode.scrollTop - 2)+ 'px' );
-
}
-
-
/* needed for IE if tbody.height is set */
-
div.scrollable tr{
-
height:auto;
-
}
-
-
</style>
-
<![endif]-->
-
-
<style type="text/css">
-
/* if mozilla */
-
html>body div.scrollable tbody {
-
overflow: auto;
-
}
-
-
table.resizable th{
-
text-align:center;
-
overflow: hidden;
-
}
-
-
/* if mozilla, add 10 for the scrollbar */
-
html>body th.scrollbarCol {
-
width:10px;
-
}
-
-
table.resizable td{
-
overflow: hidden;
-
}
-
-
table.resizable{
-
table-layout:fixed;
-
}
-
-
table.resizable input{
-
width:100%;
-
}
-
-
table.resizable textarea{
-
width:100%;
-
}
-
-
.nowrap {
-
white-space:nowrap;
-
}
-
-
/* needed for IE */
-
table.tabular th.scrollbarCol {
-
background-color:transparent;
-
}
-
-
table.tabular {
-
FONT-SIZE: 13px;
-
FONT-FAMILY: 'Verdana, Arial, Helvetica, sans-serif';
-
COLOR: #336699;
-
}
-
-
table.tabular thead {
-
COLOR: #ffffff;
-
FONT-WEIGHT: bold;
-
}
-
-
table.tabular th{
-
background-color:#c0c0c0;
-
padding: 4px;
-
}
-
-
table.tabular td {
-
background-color:#EAF4F3;
-
padding: 2px;
-
}
- </style>
-
-
<script type="text/javascript" src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js" >
-
</script>
-
-
<SCRIPT type="text/javascript">
- var ob;
-
var over = false;
-
var iEdgeThreshold = 10;
-
-
function findPos(obj) {
-
var curleft = curtop = 0;
-
if (obj.offsetParent) {
-
curleft = obj.offsetLeft;
-
curtop = obj.offsetTop;
-
while (obj = obj.offsetParent) {
-
curleft += obj.offsetLeft;
-
curtop += obj.offsetTop;
-
}
-
}
-
return [curleft,curtop];
-
}
-
-
/* Function that tells me if on the border or not */
-
function isOnBorderRight(objTable,objTh,event){
-
var width = objTh.offsetWidth;
-
var left = objTh.offsetLeft;
-
var pos = findPos(objTable);
-
var absRight = pos[0] + left + width;
-
-
if( event.clientX > (absRight - iEdgeThreshold) ){
-
return true;
-
}
-
-
return false;
-
}
-
-
function getNodeName(objReference,nodeName){
-
var oElement = objReference;
-
while (oElement != null && oElement.tagName != null && oElement.tagName != "BODY") {
-
if (oElement.tagName.toUpperCase() == nodeName) {
-
return oElement;
-
}
-
oElement = oElement.parentNode;
-
}
-
return null;
-
}
-
-
function doResize(objTh,event){
-
if(!event) event = window.event;
-
var objTable = getNodeName(objTh,"TABLE");
-
if( isOnBorderRight(objTable,objTh,event)){
-
over=true;
-
objTh.style.cursor="e-resize";
-
}
-
else{
-
over=false;
-
objTh.style.cursor="";
-
}
-
return over;
-
}
-
-
function doneResizing(){
-
over=false;
-
}
-
-
function MD(event) {
-
if(!event) event = window.event;
-
-
MOUSTSTART_X=event.clientX;
-
MOUSTSTART_Y=event.clientY;
-
-
if (over){
-
if(event.srcElement)ob = event.srcElement;
-
else if(event.target)ob = event.target;
-
else return;
-
-
ob = getNodeName(ob,"TH");
-
if(ob == null) return;
-
ob2 = getNodeName(ob,"TABLE");
-
obwidth=parseInt(ob.style.width);
-
obwidth2=parseInt(ob2.offsetWidth);
-
}
-
}
-
-
function MM(event) {
-
if(!event) event = window.event;
-
-
if (ob) {
-
st=event.clientX-MOUSTSTART_X+obwidth;
-
st2=event.clientX-MOUSTSTART_X+obwidth2;
-
-
if(st>=10){
-
ob.style.width=st;
-
ob2.style.width=st2;
-
}
-
if(document.selection) document.selection.empty();
-
else if(window.getSelection)window.getSelection().removeAllRanges();
-
}
-
}
-
-
function MU(event) {
-
if(!event) event = window.event;
-
if(ob){
-
if(document.selection) document.selection.empty();
-
else if(window.getSelection)window.getSelection().removeAllRanges();
-
ob = null;
-
}
-
}
-
-
document.onmousedown = MD;
-
document.onmousemove = MM;
-
document.onmouseup = MU;
- </script>
-
-
-
<SCRIPT type="text/javascript">
-
<!--
-
function createFindWindow(){
-
// FIXME: we need to do a mozilla implementation
-
//mozilla
-
if(window.find){
-
window.find();
-
}
-
// IE
-
else {
-
window.open( "find.html", "test","status=yes,width=500,height=250" );
-
}
-
}
-
//-->
-
</script>
-
-
-
</HEAD>
-
-
<BODY>
-
<!--
-
YOU MUST HAVE TO DEFINE WIDTH ON STYLE TAB.. if you leave NULL
-
IT RETURNS .. ERROR..
-
-->
-
<H1>RESIZABLE TABLE COLUMN</H1>
-
<form>
-
<a href="javascript:createFindWindow()">Find</a>
-
-
<div class="scrollable" >
-
<TABLE id="mytable" style="width:510px" class="sortable resizable tabular">
-
-
<THEAD>
-
-
<TR>
-
-
<TH onmousemove="doResize(this,event)" onmouseover="doResize(this,event)" onmouseout='doneResizing()' style='width:60px'>Index</TH>
-
-
<TH onmousemove="doResize(this,event)" onmouseover="doResize(this,event)" onmouseout='doneResizing()' style='width:170px'><span class="nowrap">Parameter Name</span></TH>
-
-
<TH onmousemove="doResize(this,event)" onmouseover="doResize(this,event)" onmouseout='doneResizing()' style='width:170px'><span class="nowrap">Parameter Value</span></TH>
-
-
<TH onmousemove="doResize(this,event)" onmouseover="doResize(this,event)" onmouseout='doneResizing()' style='width:110px'><span class="nowrap">Page Name</span></TH>
-
-
<TH class="sorttable_nosort scrollbarCol"></TH>
-
-
</TR>
-
</THEAD>
-
<TBODY style="height:200px">
-
<TR>
-
-
<TD>0</TD>
-
-
<TD>1_2</TD>
-
-
<TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
-
-
<TD>1_3</TD>
-
-
</TR>
-
-
<TR>
-
-
<TD>0</TD>
-
-
<TD>1_2</TD>
-
-
<TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
-
-
<TD>1_3</TD>
-
-
</TR>
-
-
<TR>
-
-
<TD>0</TD>
-
-
<TD>1_2</TD>
-
-
<TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
-
-
<TD>1_3</TD>
-
-
</TR>
-
<TR>
-
-
<TD>0</TD>
-
-
<TD>1_2</TD>
-
-
<TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
-
-
<TD>1_3</TD>
-
-
</TR>
-
<TR>
-
-
<TD>0</TD>
-
-
<TD>1_2</TD>
-
-
<TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
-
-
<TD>1_3</TD>
-
-
</TR>
-
<TR>
-
-
<TD>0</TD>
-
-
<TD>1_2</TD>
-
-
<TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
-
-
<TD>1_3</TD>
-
-
</TR>
-
<TR>
-
-
<TD>0</TD>
-
-
<TD>1_2</TD>
-
-
<TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
-
-
<TD>1_3</TD>
-
-
</TR>
-
<TR>
-
-
<TD>0</TD>
-
-
<TD>1_2</TD>
-
-
<TD><input type="text" value="this is a very long text string, this is a very long text string"></TD>
-
-
<TD>1_3</TD>
-
-
</TR>
-
-
<TR>
-
-
<TD>1</TD>
-
-
<TD><span class="nowrap">this is a very long paramter name</span></TD>
-
-
<TD>2_2</TD>
-
-
-
<TD>2_3</TD>
-
-
-
</TR>
-
-
-
<TR>
-
-
<TD>3_0</TD>
-
<TD>3_2</TD>
-
-
<TD><textarea>
-
this is a test of
-
this is a test of
-
</textarea></TD>
-
-
<TD>3_3</TD>
-
-
-
</TR>
-
-
-
<TR>
-
-
<TD>4_0</TD>
-
-
-
<TD>4_1</TD>
-
-
-
<TD>4_2</TD>
-
-
<TD>4_3</TD>
-
-
</TR>
-
-
</TBODY>
-
</table>
- <!-- needed for mozilla to shrink the window -->
-
<script type="text/javascript">
-
<!--
-
if(window.navigator && window.navigator.userAgent.indexOf("ecko") != -1 ){
-
var tbody=document.getElementById('mytable').getElementsByTagName('tbody')[0];
-
if(tbody.scrollHeight<=parseInt(tbody.style.height)) tbody.style.height="auto";
-
}
-
//-->
- </script>
-
</div>
-
</form>
-
</BODY>
-
</HTML>
-
-
| |