Archive for December, 2004

Pages (5): « 1 2 3 4 5 »

js脚本复制网页表格（转）

Dec 18, 2004 Author: | Filed under: Uncategorized

<INPUT TYPE="button" value="复制测试表格" onclick="CopyTable()"> <INPUT TYPE="button" value="将剪切板内容输出到编辑器中" onclick="PastClipboardData()"> 测试 <TABLE border="1" id="oTable"> <TR> <TD>测试表格</TD> <TD>测试表格</TD> </TR> <TR> <TD>测试表格</TD> <TD>测试表格</TD> </TR> </TABLE>文字 <iframe id="editor" src="about:blank"></iframe> <SCRIPT LANGUAGE="JavaScript"> <!-- function CopyTable() { CopyHtmlElement(oTable) } function CopyHtmlElement(obj) { editor.document.designMode = 'On'; // 将iframe变成可编辑模式,即HTML编辑器 editor.document.write("<body></body>“); // 初始化编辑器 editor.document.body.innerHTML = obj.outerHTML; editor.document.body.createTextRange().select(); // 选中编辑器内所有内容 editor.document.execCommand(”copy”,”",null); // 复制 } function PastClipboardData() { editor.focus(); editor.document.execCommand(”paste”,”",null); // 粘贴 } //–> </SCRIPT> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

<INPUT TYPE="button" value="选中测试表格" onclick="CopyTable()"> 测试 <TABLE border="1" id="oTable"> <TR> <TD>测试表格</TD> <TD>测试表格</TD> </TR> <TR> <TD>测试表格</TD> <TD>测试表格</TD> </TR> </TABLE>文字 <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[Edit on 2004-12-18 22:40:39 By guoshuang]

0 Comments

令人头疼的firefox换行问题

Dec 17, 2004 Author: | Filed under: Uncategorized

以前有人问过，我也找过资料，但没有找到好的解决办法，只能先 overflow-x:hidden 可这样mozilla引擎的浏览器老是看不到完整的内容，要看到的话，页面就会被撑破，这真是一个头疼的问题。今天又发现即使这样的空格标签也会被当成普通连续不换行字幕处理！谁知道解决方案请指教。

这是常见的url，IE加上 word-break:breal-all 就可以自动换行了，firefox不行

<body style="word-break:break-all;"> http://aa.aa.com/aa/aa/aa/aa/aa/aaa/aa/aa/aa/aaa/aa/aa/aa/aaa/aa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aa/aa/a?a=1&b=2 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

这是带了“空格”的html代码

<body style="word-break:break-all;"> guoshuangtest guoshuangtest guoshuangtest guoshuangtest guoshuangtest guoshuangtest guoshuangtest guoshuangtest guoshuangtest guoshuangtest 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

现在临时的几种解决办法（有的都适用，有的只适用IE）

<div style="width:200px;overflow:hidden"> http://aa.aa.com/aa/aa/aa/aa/aa/aaa/aa/aa/aa/aaa/aa/aa/aa/aaa/aa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aa/aa/a?a=1&b=2 </div> <div style="text-overflow:ellipsis;width:200px;overflow-x:hidden;"> http://aa.aa.com/aa/aa/aa/aa/aa/aaa/aa/aa/aa/aaa/aa/aa/aa/aaa/aa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aa/aa/a?a=1&b=2 </div> <table style="table-layout:fixed"> <tr> <td> http://aa.aa.com/aa/aa/aa/aa/aa/aaa/aa/aa/aa/aaa/aa/aa/aa/aaa/aa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aaaa/aa/aa/a?a=1&b=2 </td> </tr> </table> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

以前见过“最有效”的建议你知道是什么？手工换行！我昏倒…今天一定要搞定这个问题！哼…在 mozillazine.org 也发了个贴

http://forums.mozillazine.org/viewtopic.php?p=1072486

加快 DHTML 的一组技巧(转)

Dec 16, 2004 Author: | Filed under: Uncategorized

来自MSDN的一些翻译文章，此文及链接中提到的一些文章都很不错,需要花不少时间来看。

http://www.jxyc.gov.cn/blog/withwolf/showlog.asp?cat_id=29&log_id=539

非常感谢 Platinum 的意见以及提供微软官方地址：

http://www.microsoft.com/china/msdn/Archives/msdnonline/features/articles/dhtmlperf.asp

做学问就怕认真二字。

[Edit on 2004-12-16 16:52:00 By guoshuang]

0 Comments

google suggest 代码解析示例（by Lexrus）

Dec 16, 2004 Author: | Filed under: Uncategorized

点击这里打开新窗口浏览此网页

0 Comments

table css practice

Dec 15, 2004 Author: | Filed under: Uncategorized

Please view witH Firefox,IE will see nothing or the mistake one.

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gb2312" lang="gb2312"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta http-equiv="Content-language" content="gb2312" /> <style type="text/css" media="all"> table { border-collapse: collapse } td,th,caption {padding:4px;} tr#row1 { border-top: 3px solid blue } tr#row2 { border-top: 1px solid black } tr#row3 { border-top: 1px solid black } caption { caption-side: top;white-space:nowrap } STACK { display: inline-table } ROW { display: table-row } D { display: inline; font-weight: bolder } </style> <script type="text/java script"> </script> </head> <body> <TABLE> <CAPTION>This is a simple 3×3 table</CAPTION> <TR id="row1"> <TH>Header 1 <TD>Cell 1 <TD>Cell 2 <TR id="row2"> <TH>Header 2 <TD>Cell 3 <TD>Cell 4 <TR id="row3"> <TH>Header 3 <TD>Cell 5 <TD>Cell 6 </TABLE> <STACK> <ROW>This is the <D>top</D> row.</ROW> <ROW>This is the <D>middle</D> row.</ROW> <ROW>This is the <D>bottom</D> row.</ROW> </STACK> </body> </html> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

table { display: table } tr { display: table-row } thead { display: table-header-group } tbody { display: table-row-group } tfoot { display: table-footer-group } col { display: table-column } colgroup { display: table-column-group } td, th { display: table-cell } caption { display: table-caption } 显示更多

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Table example</TITLE> <STYLE type="text/css"> table { border-collapse: collapse; border: 5px solid yellow; } *#col1 { border: 3px solid black; } td { border: 1px solid red; padding: 1em; } td.solid-blue { border: 5px dashed blue; } td.solid-green { border: 5px solid green; } </STYLE> </HEAD> <BODY> <TABLE> <COL id="col1"><COL id="col2"><COL id="col3"> <TR id="row1"> <TD> 1 <TD> 2 <TD> 3 </TR> <TR id="row2"> <TD> 4 <TD class="solid-blue"> 5 <TD class="solid-green"> 6 </TR> <TR id="row3"> <TD> 7 <TD> 8 <TD> 9 </TR> <TR id="row4"> <TD> 10 <TD> 11 <TD> 12 </TR> <TR id="row5"> <TD> 13 <TD> 14 <TD> 15 </TR> </TABLE> </BODY> </HTML> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

表格层模型（应用背景时）

表格border-spacing解释

border冲突时，优先级

以下为引用内容:

he following rules determine which border style “wins” in case of a conflict:

1. Borders with the ‘border-style’ of ‘hidden’ take precedence over all other conflicting borders. Any border with this value suppresses all borders at this location.

2. Borders with a style of ‘none’ have the lowest priority. Only if the border properties of all the elements meeting at this edge are ‘none’ will the border be omitted (but note that ‘none’ is the default value for the border style.)

3. If none of the styles are ‘hidden’ and at least one of them is not ‘none’, then narrow borders are discarded in favor of wider ones. If several have the same ‘border-width’ then styles are preferred in this order: ‘double’, ’solid’, ‘dashed’, ‘dotted’, ‘ridge’, ‘outset’, ‘groove’, and the lowest: ‘inset’.

4. If border styles differ only in color, then a style set on a cell wins over one on a row, which wins over a row group, column, column group and, lastly, table. It is undefined which color is used when two elements of the same type disagree.

简单地说，就是 hidden > none ；粗边 > 细边； solid > dashed ；cell > row >group等。IE的渲染有错误，FF完全正确。示例如下：

<TABLE style="border-collapse: collapse; border: solid;"> <TR><TD style="border:hidden">foo</TD> <TD style="border: solid">bar</TD></TR> <TR><TD style="border: none">foo</TD> <TD style="border: solid">bar</TD></TR> </TABLE> <TABLE style="border-collapse: collapse; border: solid;"> <TR><TD style="border:none">foo</TD> <TD style="border: solid">bar</TD></TR> <TR><TD style="border: none">foo</TD> <TD style="border: solid">bar</TD></TR> </TABLE> <TABLE style="border-collapse: collapse; border: solid;"> <TR><TD style="border:none">foo</TD> <TD style="border: solid">bar</TD></TR> <TR><TD style="border: none">foo</TD> <TD style="border: dotted;">bar</TD></TR> </TABLE> <TABLE style="border-collapse: collapse; border: solid;"> <TR><TD style="border:none">foo</TD> <TD style="border: solid">bar</TD></TR> <TR><TD style="border: none">foo</TD> <TD style="border: dotted 5px;">bar</TD></TR> </TABLE> 运行代码 [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

[Edit on 2004-12-15 15:29:35 By guoshuang]

0 Comments