怎样让我的table中格子之间的大小可以像frame格式一样用户可以在发布的页面上调整
怎样让我的table中格子之间的大小可以像frame格式一样用户可以在发布的页面上调整
我的table中有两个iframe，我想让这两个iframe像frame一样可以由用户自己调整它们的大小
问题点数：20、回复次数：7Top
1 楼wangrenda（浪人）回复于 2004-09-04 13:58:18 得分 0
好有难度,建议看看孟子老大得文章Top
2 楼liuyan4794（青牛）回复于 2004-09-04 13:59:34 得分 0
提供一个网址，让我学习学习Top
3 楼wangrenda（浪人）回复于 2004-09-04 14:11:00 得分 5
http://dotnet.aspx.cc/ShowDetail.aspx?id=00C78024-5C08-4F3F-BCA8-AB3C0B330A12Top
4 楼wwgyyx（yyx）回复于 2004-09-04 15:07:23 得分 0
自己写动态生成网页啊Top
5 楼liuvb（LHR）回复于 2004-09-04 15:30:23 得分 15
给你一个参考一下：
//来自csdn <天天向上>
//to chentaoyql(chentaoyql)
//你把它加到DataGrid里也是一样呀，很容易就可以了，
//只要你把DataGrid的ID设置为“element“，再把这个JS文件包含到文档的最后就可以了（注意：一定要在DataGrid的后边）
//function CreateDataGrid(element)
{
var selectBgColor = '#A3A3A3';//被选择行的背景色
var headTdColor = 'menu';//表头背景色
var trOverColor = '#D3D3D3';
function setTdWidth(tdIndex)//设置表格的列宽
{
//alert(tdIndex);
var td = element.rows[0].cells[tdIndex];
var tab = td;
while(tab.tagName!='TABLE')tab=tab.parentElement;//显示表格内容的Table
tab=tab.parentElement;
while(tab.tagName!='TABLE')tab=tab.parentElement;//最外层的Table
var hTab = tab.rows[0].firstChild;//头Table
while(hTab.tagName!='TABLE')hTab=hTab.firstChild;
var headTd = hTab.rows[0].cells[td.cellIndex];
//alert(headTd.width);
td.width = headTd.offsetWidth;
td.style.width = headTd.offsetWidth;
td.innerHTML = "<nobr>" + td.innerHTML + "</nobr>";
//return headTd.offsetWidth;
}
function setHeadDivLeft(div)//
{
var tab = div;
while(tab.tagName!='TABLE')tab=tab.parentElement;
var headDiv = tab.rows[0].firstChild;
while(headDiv.tagName!='DIV')headDiv=headDiv.firstChild;
headDiv.scrollLeft = div.scrollLeft;
}
function initHeadTdWidth()
{
var tab = element;
tab=tab.parentElement;
while(tab.tagName!='TABLE')tab=tab.parentElement;//最外层的Table
var hTab = tab.rows[0].firstChild;//头Table
while(hTab.tagName!='TABLE')hTab=hTab.firstChild;//找到真正的列头Table
for(var i=0;i<hTab.rows[0].cells.length;i++)
{
var td = hTab.rows[0].cells[i];
td.bgColor = headTdColor;
td.style.borderLeftColor = '#eeeeee';
td.style.borderTopColor = '#eeeeee';
td.style.borderRightColor = '#666666';
td.style.borderBottomColor = '#666666';
td.onmousedown = beginResizeTd;
td.onmousemove = setTdCursor;
//td.style.display = element.rows[0].cells[i].style.display;
td.innerHTML = "<nobr>" + td.innerHTML + "</nobr>";
if(element.rows[0].cells[i].width)
{
td.width = element.rows[0].cells[i].width;
td.style.width = element.rows[0].cells[i].width;
}
else if(element.rows[0].cells[i].style.width)
{
td.width = element.rows[0].cells[i].style.width;
td.style.width = element.rows[0].cells[i].style.width;
}
else
{
//默认宽为100
td.width = 100;
td.style.width = 100;
}
}
}
function initMainTdWidth()
{
if(element.rows.length<=0) return;
for(var i=0;i<element.rows[0].cells.length;i++)
//element.rows[0].cells[i].width = setTdWidth(element.rows[0].cells[i]);
setTdWidth(i);
}
function setMainTable()
{
var tab = element;
tab=tab.parentElement;
while(tab.tagName!='TABLE')tab=tab.parentElement;//最外层的Table
var hTab = tab.rows[0].firstChild;//头Table
while(hTab.tagName!='TABLE')hTab=hTab.firstChild;
element.style.position = 'relative';
element.style.top = -hTab.offsetHeight;
element.width = hTab.offsetWidth;
element.style.width = hTab.offsetWidth;
}
function initElement()
{
var html = "<table style='table-layout:fixed;height:100%;width:100%;' cellspacing=0 cellpadding=0>";
html += "<tr><td style='height:expression(firstChild.offsetHeight+1);layout:fixed;'>";
html += "<div style='overflow:hidden;width:expression(parentElement.offsetWidth-18);position:relative;'>";
html += "<table border=1 style='border-collapse:collapse;table-layout:fixed'>";
html += element.rows[0].outerHTML; // + head
html += "</table>";
html += "</div>";
html += "</tr></td><tr><td style='height:*;layout:fixed;'>";
html += "<div id='main' style='overflow:scroll;width:expression(parentElement.offsetWidth);height:100%;' onscroll='setHeadDivLeft(this)'>";
html += element.outerHTML;// + element
html += "</div>";
html += "</td></tr></table>";
element.outerHTML = html;
//element.document.close();
initHeadTdWidth(); //设置表格头的宽
//element.deleteRow(0); //删除显示内容的第一行
initMainTdWidth(); //设置内容表格的宽
setMainTable(); //设置内容表格的位置
}
//element.width = '';
element.style.wordBreak = "break-all";
element.style.tableLayout = 'fixed';
initElement();
////////////////////////// 下面内容设置可以使用鼠标调整列宽 //////////////////////////////////////////////
element.document.attachEvent('onmousemove',resizeTd);
element.document.attachEvent('onmouseup',endResizeTd);
function element.document.onselectstart(){if(document.old)return false;}
function setTdCursor()
{
var td = event.srcElement;
if(event.offsetX>td.offsetWidth-10 || document.old)
td.style.cursor = "col-resize";
else
td.style.cursor = "auto";
}
//function resizeTimeOut(){endResizeTd()}
function beginResizeTd()
{
var td = event.srcElement;
if(event.offsetX<td.offsetWidth-10) return;
document.tdDown = true;
var tab = td;while(tab.tagName!="TABLE")tab=tab.parentElement;
document.old=
{
"td":td,
"tdWidth":td.offsetWidth,
"downX":event.x,
"table":tab,
"tableWidth":tab.offsetWidth
}
//setTimeout("resizeTimeOut()",10000);
}
function resizeTd()
{
if(!document.old || document.old["td"].tagName!="TD") return;
if(document.tdDown)
{
document.body.style.cursor = "col-resize";
var offsetWidth = (event.x-document.old["downX"]);
var newWidth = document.old["tdWidth"] + offsetWidth;
if(newWidth<=5) return;
document.old["td"].width = newWidth;
document.old["td"].style.width = newWidth;
document.old["table"].width = document.old["tableWidth"]+offsetWidth;
document.old["table"].style.width = document.old["tableWidth"]+offsetWidth;
setTdWidth(document.old["td"].cellIndex);
setMainTable();
//保存列宽
//var index = document.old["td"].cellIndex;
//divTdWidth.getElementsByTagName("INPUT")[index].value = newWidth;
}
else
{
document.body.style.cursor = "auto";
document.old = null;
}
}
function endResizeTd()
{
document.old = null;
document.tdDown = false;
document.body.style.cursor = "auto";
}
////////////////////// 下面设置点击表格时改变行背景色的事件 ////////////////////////////
element.attachEvent('onclick',doDataGridClick);
element.attachEvent('onmouseover',doDataGridMouseOver);
element.attachEvent('onmouseout',doDataGridMouseOut);
function doDataGridClick()
{
var td = event.srcElement;
if(td.tagName!="TD" && td.parentElement.tagName!="TD") return ;
var tr = td;
while(tr.tagName!="TR") tr = tr.parentElement;
if(element.oldTr!=null)
element.oldTr.bgColor = element.oldColor;
element.oldTr = tr;
element.oldColor = tr.oldColor;//tr.bgColor;
tr.bgColor = selectBgColor;
window.status = '选中行：第'+ (element.oldTr?element.oldTr.rowIndex:'-1') +'行--当前行：第'+ tr.rowIndex +'行';
}
function doDataGridMouseOver()
{
var td = event.srcElement;
if(td.tagName!="TD" && td.parentElement.tagName!="TD") return ;
var tr = td;
while(tr.tagName!="TR") tr = tr.parentElement;
if(tr == element.oldTr) return;
tr.oldColor = tr.bgColor;
tr.bgColor = trOverColor;
window.status = '选中行：第'+ (element.oldTr?element.oldTr.rowIndex:'-1') +'行--当前行：第'+ tr.rowIndex +'行';
}
function doDataGridMouseOut()
{
var td = event.srcElement;
if(td.tagName!="TD" && td.parentElement.tagName!="TD") return ;
var tr = td;
while(tr.tagName!="TR") tr = tr.parentElement;
if(tr == element.oldTr) return;
tr.bgColor = tr.oldColor;
}
}
Top
6 楼liuvb（LHR）回复于 2004-09-04 15:31:17 得分 0
把上面的保存成move.js
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<table id='element' border=1 width='100%' style='table-layout:fixed;border-collapse:collapse;position:relative'>
<tr>
<td width='50px'>列头1</td>
<td>列头目</td>
<td>列头1</td>
<td>列头目</td>
<td>列头1</td>
<td>列头目</td>
<td>列头1</td>
<td>列头目</td>
<td>列头1</td>
<td>列头目</td>
<td>列头1</td>
<td>列头目</td>
</tr>
<tr><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td></tr>
<tr><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td></tr>
<tr><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td></tr>
<tr><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td></tr>
<tr><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td></tr>
<tr><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td></tr>
<tr><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td></tr>
<tr><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td><td>内容1</td><td>内容2</td></tr>
</table>
<script language=javascript src='../move.js'></script>
</BODY>
</HTML>Top
7 楼liuyan4794（青牛）回复于 2004-09-05 15:49:23 得分 0
谢谢大家的帮助Top
相关问题
- 在table的一行中,怎么让两个格子的高度不一样?
- 谁知道Access里Alter Table语句是什么格式？？？
- select * from (select * from table),有类似这样的格式吗
- 关于ASP.Net里面table控件格式的设置
- Table的背景图片能否被格式
- 有没有办法在网页中TABLE的格子里显示另外一个网页？？？
- 医院的收费系统中打印票据，格式已经固定了，怎么样打印到它的格子中去？各位兄弟请指点一下小弟，有实例更好？
- 请兄弟帮个忙，我的dw[Grid格式]表头要加一个text，可怎么也只能放在一个格子里。不知道如果解决，请教啊。
- sql语句中CREATE TABLE的时间格式应该是怎样的?
- Table控件生成报表，行和列的格式问题，在线给分
关键词
得分解答快速导航
相关链接
广告也精彩
反馈
