JAva webjavascriptマウスで表のセルサイズのhtmlをドラッグすると、表のデータ(シリーズ4)をクリックできます.
20628 ワード
効果図:表の頭の上の縦の線をドラッグして、左右に表の幅をドラッグして、上下の幅はいっしょに変えることができます
特徴:ドラッグが極めて容易で、滑らかで、表の中のデータはクリックすることができます
コード:
特徴:ドラッグが極めて容易で、滑らかで、表の中のデータはクリックすることができます
コード:
<HTML><HEAD>
<TITLE>table</TITLE>
<SCRIPT language="JavaScript">
<!--
var hRH=19;
var bRH=17;
var rAMW=10;
var cBW=1;
var aTRLC=true;
var tVS="auto";
var tHS="auto";
var tRABL="#CC0000 1px solid";
var tRABR="black 1px solid";
var tRABT="";var tRABB="";
var tRAB="";var tRAO="";
var tHB="buttonface";
var rBH="";var rTH="";
var sRTD="Drag To Resize";
var rCO=0;
var rCI=0;
function FlexibleTable ( TID, tW, tH, tA, fRN, oT, dT ){
this.tW=tW;
this.tH=tH;
this.tA=tA;
this.fRN=(fRN)?fRN:0;
this.dT=(dT)?dT:'document';
this.oT=oT;
this.TID=TID;
this.hCs=new Array ();
this.CsWh1=new Array ();
this.hCsAt=new Array ();
this.bCat0=new Array ();
this.Dsr7=new Array ();
this.hddCs=new Array ();
this.csTes=new Array ();
this.rsTe='';
this.Draw=fvm409gjskldjr;
this.Header=fvm590gdjfv;
this.ColumnsWidth=fdjklfbxv;
this.HeaderAligment=hCsAt;
this.BodyAligment=evbfbdd;
this.Row=vckdd8df;
this.RowsCount=vrgf4gl1;
this.ColumnsCount=bvdf4gf;
this.NewDataSource=blkkun;
this.SetColumnWidth=SetColumnWidth;
this.ColumnWidthTruncation=ColumnWidthTruncation;
this.SetColumnTemplate=SetColumnTemplate;
this.SetRowsTemplate=SetRowsTemplate;
this.UnsetColumnsTemplates=UnsetColumnsTemplates;
this.UnsetRowsTemplate=UnsetRowsTemplate;
this.UnsetTemplates=UnsetTemplates;
this.ParseTemplate=ParseTemplate;
this.SetChecked=SetChecked;
this.SetHiddenColumn=SetHiddenColumn;
this.UnsetHiddenColumn=UnsetHiddenColumn;
this.UnsetHiddenColumns=UnsetHiddenColumns;
}
function SetHiddenColumn ( l1x ){
this.hddCs[l1x]=true;
}
function UnsetHiddenColumn ( l1x ){
this.hddCs[l1x]=false;
}
function UnsetHiddenColumns (){
this.hddCs=new Array ();
}
function ParseTemplate ( rowIndex, template ){
var pattern=new RegExp ('(\\{' + 'ROW' + '\\})');
while (template.match(pattern)) template=template.replace(pattern, rowIndex);
for (var columIndex=0; columIndex < this.ColumnsCount(); columIndex++){var pattern=new RegExp ('\\{' + columIndex + '\\}');
while (template.match(pattern)) template=template.replace(pattern, this.Dsr7[rowIndex][columIndex]);
}
return template;
}
function SetColumnTemplate ( l1x, template ){
this.csTes[l1x]=template;
}
function SetRowsTemplate ( template ){
this.rsTe=template;
}
function UnsetColumnsTemplates (){
this.csTes=new Array ();
}
function UnsetRowsTemplate (){
this.rsTe='';
}
function UnsetTemplates (){
this.UnsetColumnsTemplates ();
this.UnsetRowsTemplate ()
}
function SetChecked ( checkboxName, checkedElements ){
var dT=eval(this.dT);
var checkboxElements=dT.forms[0].elements[checkboxName];
if(checkboxElements!=null ){
var checkboxElementsCount=(checkboxElements.length!='undefined') ? checkboxElements.length : 1;
if(checkboxElementsCount>1 ){
for (var i=0; i < checkboxElementsCount; i++){
for (var j=0; j < checkedElements.length; j++){
if (checkboxElements[i].value==checkedElements[j]){
checkboxElements[i].checked=true;
}
}
}
}
else{
for (var ii=0; ii < checkedElements.length; ii++){
if(checkboxElements.value==checkedElements[ii].toString() ){
checkboxElements.checked=true;
}
}
}
}
}
function fvm590gdjfv (){
this.hCs=arguments;
}
function fdjklfbxv (){
this.CsWh1=arguments;
}
function hCsAt (){
this.hCsAt=arguments;
}
function evbfbdd (){
this.bCat0=arguments;
}
function vckdd8df (){
this.Dsr7[this.Dsr7.length]=arguments;
}
function vrgf4gl1 (){
return this.Dsr7.length;
}
function bvdf4gf (){
return this.hCs.length;
}
function blkkun (){
this.Dsr7=new Array ();
}
function SetColumnWidth ( zUlu, l1x, cWW2 ){
if(this.hddCs[l1x] ) return;
var cO001=eval(this.dT + '.all.column' + l1x);
var cO30=eval(this.dT + '.all.columnTitle' + l1x);
if(!cWW2 || cWW2=='undefined' ){
var cWW2=this.ColumnWidthTruncation ( zUlu, l1x );
}
for (var row=1; row < zUlu.rows.length; row++) {
var nBel=zUlu.rows(row).cells(l1x).firstChild;
nBel.style.overflow='hidden';
nBel.style.width=cWW2;
nBel.style.fontFamily='Sans-Serif, Tahoma';
nBel.style.fontSize='11px';
}
cO001.style.width=cWW2;cO30.style.overflow='hidden';
cO30.style.width=cWW2;cO30.style.fontFamily='Sans-Serif, Tahoma';cO30.style.fontSize='11px';
}
function ColumnWidthTruncation ( zUlu, l1x ){
var cWW2Truncation=0;
var cellWidth=0;
var cellsNumber=0;
for (var row=1; row < zUlu.rows.length; row++) {
cellWidth=zUlu.rows(row).cells(l1x).firstChild.scrollWidth;
if(cellWidth>rAMW ) {
cWW2Truncation+=cellWidth;cellsNumber++;
}
}
if(!cWW2Truncation ){
return eval(this.dT + '.all.column' + l1x).scrollWidth;
}
return Math.max(rAMW, cWW2Truncation/cellsNumber);
}
function fvm409gjskldjr ( oT, dT ){
if(this.ColumnsCount() ){
if(!dT ){
dT=this.dT
}
else{
this.dT=dT;
}
if(!oT){
oT=this.oT;
}
else{
this.oT=oT;
}
if(dT!='document' ){
var usingFrames=true;
}
else{
var usingFrames=false;
}
var D4fc='';
var rrCt=this.RowsCount();
var ccCt=this.ColumnsCount();
var vvCsC=ccCt-this.hddCs.length;
if(this.tA ){
D4fc+='<DIV align=' + this.tA + ((this.tH) ? ' style="height: ' + this.tH + '"' : '') + '>';
}
D4fc+='<SPAN style="' + ((this.tW!=null) ? 'width: ' + this.tW + '; ' : '') + ((this.tH!=null) ? 'height: ' + this.tH + '; ' : '') + 'overflow-x: ' + ((tHS) ? tHS : 'hidden') + '; ' +'overflow-y: ' + ((tVS) ? tVS : 'auto') + '; ' + 'border: ' + cBW + 'px inset">
';
D4fc+='<TABLE width=100% height=100% cellSpacing=0 cellPadding=0 id=' + this.TID + ' style="cursor: default; table-layout: fixed" onMouseOver="javascript:selection.empty();" onClick="javascript:selection.empty();" onSelectStart="javascript:selection.empty();">
';
D4fc+='<TR height=' + hRH + ' bgcolor=' + tHB + '>
';
//
for (var col=0; col < ccCt; col++){
if(!this.hddCs[col] ){
var llD0=this.hCs[col];if(!llD0.match('<IMG') ) llD0=' ' + llD0 + ' ';
D4fc+='<TD id=column' + col + ' style="border-top: buttonhighlight 1px solid; border-left: buttonhighlight 1px solid; border-bottom: buttonshadow 1px solid;' + ((aTRLC || col!=ccCt - 1 || vvCsC==1) ? 'border-right: buttonshadow 1px solid;' : '') + '"' + /*((this.CsWh1[col]) ? ' width=' + this.CsWh1[col] : '') + */'">
' +'<TABLE width=100% height=100% cellSpacing=0 cellPadding=0 border=0 STYLE="table-layout: fixed">
' +'<TR>
'+'<TD' + ((this.hCsAt[col]) ? ' align=' + this.hCsAt[col] : '') + '><NOBR id=columnTitle' + col + ' style="text-overflow: ellipsis; overflow: hidden"> ' + llD0 + '</NOBR></TD>
';
if(aTRLC || col!=(/*Last column*/ccCt - 1) ){
D4fc+='<TD width=3><IMG src="images/spacer.gif" width=3 height=100% border=0 style="position: relative; left: 2px" alt="' + sRTD + '" onMouseOver="this.style.cursor=\'E-resize\';" onMouseDown="javascript:' + ((usingFrames) ? 'top.' : '') + 'ResizeColumnOnMouseDownEvent(\'' + this.TID + '\', ' + col + ', \'' + dT + '\')"></TD>
';
}
D4fc+='</TR>
'+'</TABLE>'+'</TD>
';
}
}
D4fc+=(aTRLC) ? '<TD style="border-top: buttonhighlight 1px solid; border-left: buttonhighlight 1px solid;' + ' border-bottom: buttonshadow 1px solid;"><NOBR><IMG src="images/spacer.gif" width=10 height=1 border=0></NOBR></TD>
' : '';
D4fc+='</TR>
';
//
for (var row=0; row < rrCt; row++){
D4fc+='<TR height=' + bRH + ' bgcolor=#FFFFFF ' + ((this.rsTe) ? this.ParseTemplate (row, this.rsTe) : '') + ((rBH!='') ?' onMouseOver="this.style.background=\'' + rBH + '\'; this.style.color=\'' + rTH + '\';" onMouseOut="this.style.background=\'#FFFFFF\'; this.style.color=\'#000000\';"' : '') + '>
';
for (var col=0; col < ccCt; col++){
if(!this.hddCs[col] ){
var llD0=(this.csTes[col]) ? this.ParseTemplate (row, this.csTes[col]) : ' ' + this.Dsr7[row][col] + ' ';
D4fc+='<TD' + ((this.bCat0[col]) ? ' align=' + this.bCat0[col] : '') + ' style="border-bottom: #C6C3C6 1px solid;' + ((aTRLC || col!=ccCt - 1 || vvCsC==1) ? 'border-right: #C6C3C6 1px solid;' : '') + '"><NOBR style="text-overflow: ellipsis; overflow: hidden" >' + llD0 + '</NOBR></TD>
';
}
}
D4fc+=(aTRLC) ? '<TD style="border-bottom: #C6C3C6 1px solid;"><NOBR><IMG src="images/spacer.gif" width=10 height=1 border=0></NOBR></TD>
' : '';
D4fc+='</TR>
';
}
for (var row=rrCt; row < this.fRN; row++){
D4fc+='<TR height=' + bRH + ' bgcolor=#FFFFFF>
';
for (var col=0; col < ccCt; col++){
if(!this.hddCs[col] ){
D4fc+='<TD style="border-bottom: #C6C3C6 1px solid;' + ((aTRLC || col!=ccCt - 1 || vvCsC==1) ? 'border-right: #C6C3C6 1px solid;' : '') + '"><NOBR> </NOBR></TD>
';
}
}
D4fc+=(aTRLC) ? '<TD style="border-bottom: #C6C3C6 1px solid;"><NOBR><IMG src="images/spacer.gif" width=10 height=1 border=0></NOBR></TD>
' : '';
D4fc+='</TR>
';
}
D4fc+='</TABLE></SPAN>';
D4fc+='<SPAN id=reAa' + this.TID + ' style="position: absolute; ' + ((tRABL ) ? 'border-left: '+ tRABL + '; ' : '') + ((tRABR ) ? 'border-right: ' + tRABR + '; ' : '') + ((tRABT ) ? 'border-top: '+ tRABT + '; ' : '') + ((tRABB) ? 'border-bottom: '+ tRABB + '; ' : '') + ((tRAB ) ? 'background-color: ' + tRAB + '; ' : '') + ((tRAO ) ? 'filter: alpha(opacity=' + tRAO + ');' : '') + 'top: 0; left: 0px; width: 0px; height: 0px; z-index: 2; display: none;" onMouseMove="javascript:' + ((usingFrames) ? 'top.' : '') + 'ResizeColumnOnMouseMoveEvent(\'' + this.TID + '\', \'' + dT + '\');" onMouseUp="javascript:' + ((usingFrames) ? 'top.' : '') + 'ResizeColumnOnMouseUpEvent(\'' + this.TID + '\', \'' + dT + '\');"></SPAN>';
if (this.tA){
D4fc+='</DIV>';
}
var zUlu=eval(dT + '.all.' + this.TID);
if(zUlu!=null ){
for (var col=0; col < ccCt; col++){
if(!this.hddCs[col] ){
var cO001=eval(dT + '.all.columnTitle' + col);
var zUlu =eval(dT + '.all.' + this.TID);
if(dT=='document' ){
var bWWW=cBW;
}
else{
var bWWW=top.cBW;
}
var cWW2=cO001.offsetWidth;this.CsWh1[col]=cWW2;
}
}
var obj=zUlu.parentElement;
if(obj.parentElement.tagName=="DIV" )obj=obj.parentElement;obj.outerHTML=D4fc;
}
else{
if(!oT ){
eval(dT).write(D4fc);
}
else{
eval(dT + '.all.' + oT).style.overflow="";
eval(dT + '.all.' + oT).innerHTML=D4fc;
}
}
for(var col=0;col<ccCt;col++){
if(!this.hddCs[col] ){
if(aTRLC||col<ccCt-1){
var cO001=eval(dT + '.all.column' + col);
var zUlu=eval(dT + '.all.' + this.TID);
this.SetColumnWidth ( zUlu, col, this.CsWh1[col] );
}
}
}
}
else{
alert("Error: Table data is undefined.");
}
}
function GetGlobalOffset ( obj, side ){
switch(side){
case "top":
case "left":
var leftOffset=0;
var topOffset=0;
while(obj.tagName!='BODY'){
leftOffset+=obj.offsetLeft;
topOffset +=obj.offsetTop;
obj=obj.offsetParent;
}
return eval(side + 'Offset');
default:return 0;
}
}
function ResizeColumnOnMouseDownEvent ( TID, l1x, dT ){
var cO001=eval(dT + '.all.column' + l1x);
var zUlu=eval(dT + '.all.' + TID);
var reAa=eval(dT + '.all.reAa' + TID);
if(dT=='document' ){
rCO=cO001;
rCI=l1x;
var tLO5=GetGlobalOffset(zUlu, 'left');
var tT0O=GetGlobalOffset(zUlu, 'top');
var bWWW=cBW;
}
else{
top.rCO=cO001;
top.rCI=l1x;
var tLO5=top.GetGlobalOffset(zUlu, 'left');
var tT0O =top.GetGlobalOffset(zUlu, 'top');
var bWWW=top.cBW;
}
var tH=zUlu.parentElement.scrollHeight;
var tW=zUlu.parentElement.scrollWidth;
var tableScrollTop =zUlu.parentElement.scrollTop;
var tableScrollLeft=zUlu.parentElement.scrollLeft;
var tableSpanHeight=zUlu.parentElement.style.pixelHeight;
var tableSpanWidth=zUlu.parentElement.style.pixelWidth;
var cellEncirclement=bWWW*2;
var cWW2=cO001.scrollWidth+cellEncirclement;
var hRH=cO001.scrollHeight+cellEncirclement;
var cLot=cO001.offsetLeft;
var pixelLeft=tLO5+cLot-tableScrollLeft;
if(pixelLeft<tLO5){
var reAaOffset=tableScrollLeft - cLot;
cWW2 -= reAaOffset - bWWW;
pixelLeft+=reAaOffset + bWWW;
reAa.style.borderLeft="";
}
else{
reAa.style.borderLeft=tRABL;
}
var ciHT2=(zUlu.parentElement.clientHeight + bWWW) - hRH + tableScrollTop;
reAa.style.pixelLeft =pixelLeft;
reAa.style.pixelTop =tT0O + hRH - tableScrollTop;
reAa.style.pixelWidth =cWW2;
reAa.style.pixelHeight=ciHT2;
reAa.style.display="inline";
reAa.setCapture();
}
function ResizeColumnOnMouseMoveEvent ( TID, dT ){
var zUlu =eval(dT + '.all.' + TID);
var reAa =eval(dT + '.all.reAa' + TID);
if(dT=='document' ){
var cO001=rCO;
var tLO5=GetGlobalOffset(zUlu, 'left');
var tT0O =GetGlobalOffset(zUlu, 'top');
var aMWW=rAMW;
}
else{
var cO001=top.rCO;
var tLO5=top.GetGlobalOffset(zUlu, 'left');
var tT0O =top.GetGlobalOffset(zUlu, 'top');
var aMWW=top.rAMW;
}
var cLot=cO001.offsetLeft;
var tW=zUlu.parentElement.scrollWidth;
var tableScrollLeft=zUlu.parentElement.scrollLeft;
var tableSpanWidth=zUlu.parentElement.style.pixelWidth;
var reAaRightBorder=zUlu.parentElement.clientWidth + tLO5;
var cWW2=Math.min(eval(dT.substr(0, dT.length-8) + 'window.event.clientX'), reAaRightBorder) + tableScrollLeft - (tLO5 + cLot);
var pixelLeft=tLO5 + cLot - tableScrollLeft;
if(pixelLeft < tLO5 ){
var reAaOffset=tableScrollLeft - cLot;
cWW2 -= reAaOffset;
pixelLeft+=reAaOffset;
}
cWW2=Math.max(cWW2, aMWW);
reAa.style.width=cWW2;
}
function ResizeColumnOnMouseUpEvent ( TID, dT ){
var zUlu=eval(dT + '.all.' + TID);
if(dT=='document' ){
var cO001=rCO;var l1x=rCI;
var tLO5=GetGlobalOffset(zUlu, 'left');
var tT0O =GetGlobalOffset(zUlu, 'top');
var aMWW=rAMW;
}
else{
var cO001=top.rCO;
var l1x=top.rCI;
var tLO5=top.GetGlobalOffset(zUlu, 'left');
var tT0O =top.GetGlobalOffset(zUlu, 'top');
var aMWW=top.rAMW;
}
var cO30=eval(dT + '.all.columnTitle' + l1x);
var reAa=eval(dT + '.all.reAa' + TID);
var cLot =cO001.offsetLeft;
var cWW2=eval(dT.substr(0, dT.length-8) + 'window.event.clientX') + zUlu.parentElement.scrollLeft - (tLO5 + cLot);
cWW2=Math.max(cWW2, aMWW);
reAa.releaseCapture();
for (row=1; row < zUlu.rows.length; row++) {
var nBel=zUlu.rows(row).cells(l1x).firstChild;
nBel.style.overflow='hidden';
nBel.style.width=cWW2;
}
cO001.style.width=cWW2;
cO30.style.overflow='hidden';
cO30.style.width=cWW2;
reAa.style.display="none";
}
var tableHighlightedRowObj = null;
var tableRowsBackgroundColor = '#FFFFFF';
var tableRowsTextColor = '#000000';
var tableRowsHighlightBackgroundColor = 'highlight';
var tableRowsHighlightTextColor = 'highlighttext';
function TableRowHighlight ( rowObject, resetRows, resetPrevOnly ){
if (resetRows == true || resetRows == undefined ){
if ( resetPrevOnly == true ){
if ( tableHighlightedRowObj != null ){
RowHighlight (tableHighlightedRowObj, false);
}
}
else{
TableRowsReset(rowObject.parentElement);
}
}
if ( !RowHighlighted(rowObject) ){
RowHighlight(rowObject, true);
}
else{
RowHighlight (rowObject, false);
}
tableHighlightedRowObj = rowObject;
}
function TableRowsReset ( tableObject ){
for (var i = 1; i < tableObject.rows.length; i++){
var rowObject = tableObject.rows[i];RowHighlight ( rowObject, false );
}
}
function RowHighlight ( rowObject, highlightRow ){
if ( highlightRow == true || highlightRow == undefined ){
var backgorundColor = tableRowsHighlightBackgroundColor;
var textColor = tableRowsHighlightTextColor;
}
else{
var backgorundColor = tableRowsBackgroundColor;var textColor = tableRowsTextColor;
}
rowObject.style.background = backgorundColor;
for (var i = 0; i < rowObject.childNodes.length; i++){
rowObject.childNodes[i].style.color = textColor;
}
}
function RowHighlighted ( rowObject ){
return (rowObject.style.background == tableRowsHighlightBackgroundColor) ? true : false;
}
var recordID = null;
var Table = new FlexibleTable ('flexibleTable', '100%', '200', 'center', 20, 'flexibleTableSpan');
Table.Header ('Country', 'ISO Code 2', 'ISO Code 3', '');
Table.ColumnsWidth ('200', '100', '100');
Table.HeaderAligment ('', 'center', 'center');
Table.BodyAligment ('', 'center', 'center');
Table.SetHiddenColumn(3);
Table.SetRowsTemplate ("onMouseDown=\"javascript:TableRowHighlight(this, true, true);recordID={3};\" onMouseOver=\"window.status='{0}'\" onMouseOut=\"window.status=''\" ondblclick=\"javascript:alert('Country Name: {0}, ISO Code 2: {1}, ISO Code 3: {2}, Country ID: {3}');\" title=\"{0}\"");
Table.Row('Afghanistan','AF','AFG','1');
Table.Row('Albania','AL','ALB','2');
Table.Row('Algeria','DZ','DZA','3');
Table.Row('American Samoa','AS','ASM','4');
Table.Row('Andorra','AD','AND','5');
Table.Row('Angola','AO','AGO','6');
Table.Row('Anguilla','AI','AIA','7');
Table.Row('Antarctica','AQ','ATA','8');
Table.Row('Antigua and Barbuda','AG','ATG','9');
Table.Row('Argentina','AR','ARG','10');
Table.Row('Armenia','AM','ARM','11');
Table.Row('Aruba','AW','ABW','12');
Table.Row('Australia','AU','AUS','13');
Table.Row('Austria','AT','AUT','14');
Table.Row('Azerbaijan','AZ','AZE','15');
Table.Row('Bahamas','BS','BHS','16');
Table.Row('Bahrain','BH','BHR','17');
Table.Row('Bangladesh','BD','BGD','18');
Table.Row('Barbados','BB','BRB','19');
Table.Row('Belarus','BY','BLR','20');
//-->
</SCRIPT>
</HEAD>
<BODY scroll="no" bgcolor=buttonface leftMargin=2 topMargin=2 onLoad="Table.Draw()" oncontextmenu="return false;" style="border: 0px none; ">
<TABLE width=100% height=100% cellspacing=0 cellpadding=0 border=0 style="border: 1px inset">
<TR>
<TD><SPAN id="flexibleTableSpan"></SPAN></TD>
</TR>
</TABLE>
</BODY>
</HTML>