Question

我使用脚本from this library来显示表格。当我在简单的body元素中测试它时，它呈现完美的。 Here is the fiddle.

但是我想在下面的代码中显示div中的表（在leftdiv内），但它会在所有div之外呈现。 我该如何解决这个问题？

<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <script type="text/javascript" src="http://yui.yahooapis.com/3.17.2/build/yui/yui-min.js"></script>
    </head>

    <body class="yui3-skin-sam">
        <div id="leftrightwrapper" style="background-color:brown; width:1180px; height:650px;"> <!-- start leftrightwrapper -->

        <div id="leftwrapper" style="width:590px; float:left; background-color:grey; overflow-y:auto;  height:650px;" class="yui3-skin-sam"> <!--start leftwrapper-->
            <div >
                <script>
                    YUI().use("datatable-sort", function(Y) {
                    var cols = [
                        {key:"Company", label:"Sort Column A", sortable:true},
                        {key:"Phone", label:"Sort Column B", sortable:true},
                        {key:"Contact", label:"Sort Column C", sortable:true}
                    ],
                    data = [
                        {Company:"Company Bee", Phone:"415-555-1234", Contact:"Sally Spencer"},
                        {Company:"Acme Company", Phone:"650-555-4444", Contact:"John Jones"},
                        {Company:"Industrial Industries", Phone:"408-555-5678", Contact:"Robin Smith"}
                    ],
                    table = new Y.DataTable({
                        columns: cols,
                        data   : data,
                        summary: "Contacts list",
                        caption: "Table with simple column sorting"
                    }).render("#sort");
                    });
                </script>
            </div>

        </div> <!-- end leftwrapper -->

        <div id="rightwrapper" style="width:590px; float:right; background-color:pink;  overflow-y:auto;  height:650px;" >
            <!-- contents of rightdiv -->
        </div> <!-- end rightdiv -->

        </div> <!-- end leftrightwrapper -->




    </body>
</html>

enter image description here

Answer 1

提供所需的<div/> ID sort

表格不会在您放置脚本的位置呈现，它将在将作为render的参数提供的元素中呈现

.render("#sort");

...所以必须有一个与选择器匹配的元素（当前页面中没有这样的元素，因此它将被渲染到正文中）

当然您也可以将render的参数更改为#leftwrapper并使用当前ID

http://jsfiddle.net/9J8yy/2/

为什么内容完全出现在div之外？

1 个答案: