钻下一张桌子 [英] drill down of a table
问题描述
你好，
我需要以表格的形式显示摘要报告，通过点击一个表格，给予
用户在选定行上进行深入分析的能力+图标。
查看特定行的深入查看后，用户应该可以通过单击 - 图标将其隐藏起来。它应该能够在IE 5
或更新的Win2000 / XP环境中工作，并且需要最好的说明在
静态网页
http://www.open365test.net/js_drilldown.html
到目前为止，我还没有找到如何在
进行在线搜索的例子，并希望得到任何帮助。
请注意，我发布的内容是
comp.lang.javascript
和
comp.infosystems。 www.authoring.stylesheets
谢谢，
迪帕克
Hello,
I need to display a summary report as an table, giving the
user ability to drilldown on a selected row by clicking on a ''+'' icon.
After viewing drilldown of a particular row, user should be able to
hide it back by clicking on ''-'' icon. It should be able to work in IE 5
or newer in Win2000/XP environment and the need is best illustrated in
the static webpage
http://www.open365test.net/js_drilldown.html
So far, I have not been able to find an example of how to do this in
doing online searches and would appreciate any help.
Please note, I''m posting this in
comp.lang.javascript
and
comp.infosystems.www.authoring.stylesheets
Thanks,
Deepak
推荐答案
" deepakp" <德********* @ hotmail.com> skrev i meddelandet
新闻：11 ********************* @ z14g2000cwz.googlegro ups.com ...
"deepakp" <de*********@hotmail.com> skrev i meddelandet
news:11*********************@z14g2000cwz.googlegro ups.com...
你好，
我需要以表格的形式显示摘要报告，让
用户能够通过点击+图标来深入查看选定的行。<浏览特定行的深入查看后，用户应该能够通过单击 - 图标将其隐藏起来。它应该能够在IE 5中工作，或者在Win2000 / XP环境中更新，并且需要在静态网页中得到最好的说明
http://www.open365test.net/js_drilldown.html
到目前为止，我无法在网上搜索中找到如何做到这一点的例子，并希望得到任何帮助。
请注意，我发布的内容在
comp.lang.javascript
和
comp.infosystems。 www.authoring.stylesheets
谢谢，
Deepak
Hello,
I need to display a summary report as an table, giving the
user ability to drilldown on a selected row by clicking on a ''+'' icon.
After viewing drilldown of a particular row, user should be able to
hide it back by clicking on ''-'' icon. It should be able to work in IE 5
or newer in Win2000/XP environment and the need is best illustrated in
the static webpage
http://www.open365test.net/js_drilldown.html
So far, I have not been able to find an example of how to do this in
doing online searches and would appreciate any help.
Please note, I''m posting this in
comp.lang.javascript
and
comp.infosystems.www.authoring.stylesheets
Thanks,
Deepak
< tbody>从理论上来说，这些部分应该可以解决问题，但是因为他们没有进行实践，如何用一个图标在单元格下面的行中嵌套一个表格呢？
< table>
< tr>
< td> Col 1< / td>
< ; td> Col 2< img src =" closedicon.gif" id =" someid_expand"
onclick =" toggleDataVisibility（''someid''）">< / td>
< td> Col 3< / td>
< / tr>
< tr>
< td colspan =" 3"> ;
<！ - 嵌套表 - >
< table id =" someid">
< tr>
< td>< / td>
< td> Col 2 cont''d< / td>
< td>< / td>
< / tr>
< / table>
< / td>
< / tr>
< / table>
单击图标img时，调用如下函数：
函数toggleDataVisibility（inTableID）{
var theTable = document.getElementById（ inTableID）;
var theIcon = document.getElementById（inTableID +" _expand"）;
var tableIsInvisible =（theTable&& theTable.style.display& &安培; <无线电通信/>
theTable.style.display ==" none"）;
if（theTable&& theIcon&& tableIsInvisible）{
//让它隐身
theTable.style.display =" block" ;; //或其他
//切换到其他图标
theIcon.src =" openicon.gif";
}
else if（theTable&& theIcon）{
//让它可见
theTable.style.display =" none" ;
//切换到其他图标
theIcon.src =" closedicon.gif";
}
}
未经测试，但你得到了一般的想法。使用正确的CSS格式，表格的
嵌套也不可见。
Joakim Braun
<tbody> sections should in theory do the trick, but as they don''t in
practise, how about nesting a table in the row below the cell with the icon?
<table>
<tr>
<td>Col 1</td>
<td>Col 2 <img src="closedicon.gif" id="someid_expand"
onclick="toggleDataVisibility(''someid'')"></td>
<td>Col 3</td>
</tr>
<tr>
<td colspan="3">
<!--Nested table -->
<table id="someid">
<tr>
<td></td>
<td>Col 2 cont''d</td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
When the icon img is clicked, call a function like this:
function toggleDataVisibility(inTableID){
var theTable = document.getElementById(inTableID);
var theIcon = document.getElementById(inTableID + "_expand");
var tableIsInvisible = (theTable && theTable.style.display &&
theTable.style.display == "none");
if(theTable && theIcon && tableIsInvisible){
// Make it invisible
theTable.style.display="block"; // or whatever
// Switch to other icon
theIcon.src = "openicon.gif";
}
else if(theTable && theIcon){
// Make it visible
theTable.style.display="none";
// Switch to other icon
theIcon.src = "closedicon.gif";
}
}
Untested, but you get the general idea. With the right CSS formatting, the
nested-ness of the table won''t be visible.
Joakim Braun
deepakp写道：
deepakp wrote:
你好，
我需要以表格的形式显示摘要报告，给予
用户通过单击+图标在所选行上向下钻取的能力。
查看特定行的深入查看后，用户应该能够通过单击 - 来隐藏它。图标。它应该能够在IE 5中工作，或者在Win2000 / XP环境中更新，并且需要在静态网页中得到最好的说明
http://www.open365test.net/js_drilldown.html
到目前为止，我无法在网上搜索中找到如何做到这一点的例子，并希望得到任何帮助。
请注意，我发布的内容在
comp.lang.javascript
和
comp.infosystems。 www.authoring.stylesheets
谢谢，
Deepak
Hello,
I need to display a summary report as an table, giving the
user ability to drilldown on a selected row by clicking on a ''+'' icon.
After viewing drilldown of a particular row, user should be able to
hide it back by clicking on ''-'' icon. It should be able to work in IE 5
or newer in Win2000/XP environment and the need is best illustrated in
the static webpage
http://www.open365test.net/js_drilldown.html
So far, I have not been able to find an example of how to do this in
doing online searches and would appreciate any help.
Please note, I''m posting this in
comp.lang.javascript
and
comp.infosystems.www.authoring.stylesheets
Thanks,
Deepak
i认为表不适合这种情况，至少不如你的
例子。也许尝试一下块项目列表。
i think tables are not suitable for this, at least not as in your
example. maybe try somthing with a list of block items.
2005年1月15日08:31:39 -0800，comp.lang.javascript" deepakp"
< de ********* @ hotmail.com>写道：
On 15 Jan 2005 08:31:39 -0800, in comp.lang.javascript "deepakp"
<de*********@hotmail.com> wrote:
|您好，
|
|我需要以表格的形式显示摘要报告，给出
|用户通过单击+图标来深入查看选定行的功能。
|在查看特定行的深入分析后，用户应该能够
|点击'' - ''图标隐藏它。它应该能够在IE 5中工作
|或者在Win2000 / XP环境中更新，并且需要在
|中得到最好的说明静态网页
|
| http://www.open365test.net/js_drilldown.html
|
|到目前为止，我还没有找到如何在
|中执行此操作的示例做在线搜索，并感谢任何帮助。
|
|请注意，我在
|中发布此内容comp.lang.javascript
|和
| comp.infosystems。 www.authoring.stylesheets
|
|谢谢，
| Deepak
| Hello,
|
| I need to display a summary report as an table, giving the
| user ability to drilldown on a selected row by clicking on a ''+'' icon.
| After viewing drilldown of a particular row, user should be able to
| hide it back by clicking on ''-'' icon. It should be able to work in IE 5
| or newer in Win2000/XP environment and the need is best illustrated in
| the static webpage
|
| http://www.open365test.net/js_drilldown.html
|
| So far, I have not been able to find an example of how to do this in
| doing online searches and would appreciate any help.
|
| Please note, I''m posting this in
| comp.lang.javascript
| and
| comp.infosystems.www.authoring.stylesheets
|
| Thanks,
| Deepak
我上传了几个文件给你看。第一个文件
使用嵌套表来显示/隐藏相关信息。
http://jjnau.netfirms.com/showhide/showhide.htm
如你所见，由于嵌套;整个页面的单元格宽度不会是相同的。使用演示数据
这看起来并不太糟糕。在IE和Firefox中查看上面的链接。 Firefox
比IE更好地突出了锯齿状布局。
下一个文件使用CSS来创建一个像表格一样的布局。虽然
后续文件在IE中运行良好，但在Firefox中看起来很糟糕。
http://jjnau.netfirms.com/showhide/showhideCSS.htm
但如果你只使用IE，那么上面的工作就可以了好的。
警告：我知道CSS的基础知识，但我不确定跨浏览器
不可比性。
--------------------------------------------- ------------------
jn **** @ yourpantsbigpond。 net.au ：脱掉裤子回复
----------------------------- ----------------------------------
I''ve uploaded a couple of files for you to look at. The first file
uses nested tables to display/hide the relevant information.
http://jjnau.netfirms.com/showhide/showhide.htm
As you can see, due to the nesting; the cell widths will not be the
same throughout the page. This doesn''t look too bad with the demo data
you have. View the above link in both IE and Firefox. Firefox
highlights the jagged layout better than IE.
The next file uses CSS to have a layout like a table. While the
following file works well in IE it appears horrendous in Firefox.
http://jjnau.netfirms.com/showhide/showhideCSS.htm
But if you only use IE then the above will work ok.
Caveat: I know the basics of CSS but I''m not sure of the cross browser
incompatabilities.
---------------------------------------------------------------
jn****@yourpantsbigpond.net.au : Remove your pants to reply
---------------------------------------------------------------
这篇关于钻下一张桌子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
