我想将解决方案发布到以下内容。
可调整大小的列表。
搜索并替换表中的值。 （仅限IE）
可滚动的表格。
可排序的表。
它基于我在网上发现的许多示例。 在IE和mozilla中均可使用。
http://www.imaputz.com/cssStuff/bigFourVersion.html http://www.thescripts.com/forum/thre...resizable.html http://www.kryogenix.org/code/browser/sorttable/去做。
调整表格大小。
在Mozilla中搜索并替换值。
待办事项清单上的任何建议或示例将不胜感激。
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> ------------------------------------
<HTML>
<HEAD>
<style>
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> From: https://bytes.com/topic/javascript/insights/737151-resizable-sortable-findable-scrollable-html-table
1624
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
