栏目:Java Web(<--点此查看更多)Java Web 开发相关技术及框架,JSP|Servlet|Javabean|SSH|EJB|HTML|CSS|JavaScript等
  • HTML appendChild cloneNode setAttribute

  • Wed Oct 26 17:00:22 CST 2016 编程者 我要收藏(...) 评论 ...
  • 该代码片段展示了在HTML中DOM对象appendChild、cloneNode、setAttribute等方法的使用。
  •     // 实现带有页头,页尾设计的模板页面,创建新的展示页面。
        // 实际的应用场景实现类似 Word 文档形式的网页打印功能,该函数用来创建新页。
        proxy.createPage = function (p) {
            // 获取页面中定义的页头,主页,页尾等模板
            var rowsHeader = document.getElementById("rows_header");
            var rowsBody = document.getElementById("rows_body");
            var rowsFooter = document.getElementById("rows_footer");
            // 分别复制页头,主页,页尾模板,并追加到 Body。
            var cloneHeaderNode = rowsHeader.cloneNode(true);
            cloneHeaderNode.setAttribute("id", "rows_header" + p);
            cloneHeaderNode.style.display = "table";
            document.body.appendChild(cloneHeaderNode);
            var cloneBodyNode = rowsBody.cloneNode(true);
            cloneBodyNode.setAttribute("id", "rows_body" + p);
            cloneBodyNode.style.display = "table";
            document.body.appendChild(cloneBodyNode);
            var cloneFooterNode = rowsFooter.cloneNode(true);
            cloneFooterNode.setAttribute("id", "rows_footer" + p);
    // 定义某元素内部的 getElementById方法, 
            // 功能类似 document.getElementById()
            cloneFooterNode.getById = function (doc, id) {
                var target;
                for (var d = 0;d < doc.children.length;d++) {
                    if (doc.children[d].id === id) {
                        target = doc.children[d];
                        break;
                    } else {
                        // 通过迭代查找下一级。
                        target = this.getById(doc.children[d], id);
                    }
                }
                return target;
            };
            cloneFooterNode.getElementById = function (id) {
                return this.getById(this, id);
            };
            // 通过自定义的查找函数设置页码。
            var pageIndexSpan = cloneFooterNode.getElementById("pageIndex");
            if (pageIndexSpan) {
                pageIndexSpan.innerHTML = (1 + p);
            }
            cloneFooterNode.style.display = "table";
            document.body.appendChild(cloneFooterNode);
        };
  • 信息来源:http://bianchengzhe.com (举报这篇文章)
  • 好评(...) 中评(...) 差评(...)