分类 页面前端 下的文章

前端表格的合并行和合并列

虽然现在早已没人用表格进行布局,但是并不代表table标签被放弃,反而在前端布局中许多行列数据的呈现还是使用table更为合适,特别是有行列合并的情况下尤为需要使用表格
TD标签有个两个属性,分别是rowspan和colspan分别代表跨行数和跨列数,指定他们的值便可实现单元格的合并

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <style type="text/css">
                .table td {
                    text-align: center;
                    width: 180px;
                    border: #0CC 3px solid;
                }
            </style>
        </head>
        <body>
            <table class="table">
                <tr>
                    <td>一行一列</td>
                    <td>一行二列</td>
                    <td>一行二列</td>
                </tr>
                <tr>
                    <td>二行一列</td>
                    <td>二行二列</td>
                    <td rowspan="2">一行三列,二行三列</td>
                </tr>
                <tr>
                    <td>三行一列</td>
                    <td>三行二列</td>
                </tr>
                <tr>
                    <td>四行一列</td>
                    <td colspan="2">四行二列</td>
                </tr>
            </table>
        </body>
    </html>

一行一列 一行二列 一行二列
二行一列 二行二列 一行三列,二行三列
三行一列 三行二列
四行一列 四行二列

iframe自适应高度完美版解决DOM元素高度变化问题,使用以下方法在iframe内容长度增加时有效,但在减短时无效

iframe自适应高度完美版解决DOM元素高度变化问题,使用以下方法在iframe内容长度增加时有效,但在减短时无效
因系统使用代码自动计算iframe的内高度,并实时把高度值赋给iframe节点,此操作有问题,造成循环,iframe节点height属性值被设定后,读取iframe内高度便会读到这个值,造成无法按实际高度更新滚动条。​

解决要点:iframe内部关闭弹窗操作时把父页面iframe节点height属性去除。

    <iframe id="iframe" src="iframe_b.html" scrolling="no" frameborder="0"></iframe>
    <script type="text/javascript">       
        function reinitIframe() {           
             var iframe = document.getElementById("iframe");           
             try {               
                var bHeight =iframe.contentWindow.document.body.scrollHeight;               
                var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;              
                var height = Math.max(bHeight, dHeight);            iframe.height = height;           
             } catch (ex) { }       
        }       
    window.setInterval("reinitIframe()", 200);//定时去检查iframe的高度,这样保证时时都是自动高了
    <script>

在ifrme内改变高度时执行:

    window.parent.document.getElementById("iframe").removeAttribute("heigth");