Javascript 当样式为“时,下载不在otabletools中工作”;显示:无“;

Javascript 当样式为“时,下载不在otabletools中工作”;显示:无“;,javascript,jquery,html,css,datatable,Javascript,Jquery,Html,Css,Datatable,使用otabletools下载不工作。如果删除style=“display:none”,则可以下载。但我的要求是,当我点击show按钮时,我想显示表格并下载。请帮我做这个 下面是我的代码 <link href="<%=request.getContextPath()%>/media/css/TableTools.css" rel="stylesheet" type="text/css"> <script type="text/javascript" language

使用otabletools下载不工作。如果删除
style=“display:none”
,则可以下载。但我的要求是,当我点击show按钮时,我想显示表格并下载。请帮我做这个

下面是我的代码

<link href="<%=request.getContextPath()%>/media/css/TableTools.css" rel="stylesheet" type="text/css">
<script type="text/javascript" language="javascript" src="<%=request.getContextPath()%>/media/js/jquery-1.8.1.js"></script>
<script src="<%=request.getContextPath()%>/media/js/jquery.dataTables.js"></script>
<script src="<%=request.getContextPath()%>/media/js/ZeroClipboard.js"></script>
<script src="<%=request.getContextPath()%>/media/js/TableTools.js"></script>     
</head>

<body id="dt_example">
    <div id="container">      
        <div style="display: none" id="otableDiv" class="otableDiv">
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="example" >
                <thead>
                    <tr>
                        <th>Rendering engine</th>
                        <th>Browser</th>
                        <th>Platform(s)</th>
                        <th>Engine version</th>
                        <th>CSS grade</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="odd gradeX">
                        <td>Trident</td>
                        <td>Internet Explorer 4.0</td>
                        <td>Win 95+</td>
                        <td class="center"> 4</td>
                        <td class="center">X</td>
                    </tr>
                    <tr class="even gradeC">
                        <td>Trident</td>
                        <td>Internet Explorer 5.0</td>
                        <td>Win 95+</td>
                        <td class="center">5</td>
                        <td class="center">C</td>
                    </tr>          
                <tfoot>
                    <tr>
                        <th>Rendering engine</th>
                        <th>Browser</th>
                        <th>Platform(s)</th>
                        <th>Engine version</th>
                        <th>CSS grade</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <input type="button" id="btn" value="show">
</body>

<script type="text/javascript">
    $(document).ready(function() {

        $('#example').dataTable({
            "sDom": 'T<"clear">lfrtip',
            "oTableTools": {
                "aButtons": [
                    {
                        "sExtends": "pdf",
                        "sButtonText": "Download Pdf",
                        "sButtonClass": "btn-primary"
                    }
                ]
            }
        });


        $("#btn").click(function() {
            $(".otableDiv").css({'display': 'table'});
        });
    });

</script>

渲染引擎
浏览器
月台
引擎版本
CSS等级
三叉戟
Internet Explorer 4.0
赢得95分+
4.
X
三叉戟
Internet Explorer 5.0
赢得95分+
5.
C
渲染引擎
浏览器
月台
引擎版本
CSS等级
$(文档).ready(函数(){
$('#示例')。数据表({
“sDom”:“Tlfrtip”,
“可旋转工具”:{
“阿布顿”:[
{
“性倾向”:“pdf”,
“sButtonText”:“下载Pdf”,
“sButtonClass”:“btn主要”
}
]
}
});
$(“#btn”)。单击(函数(){
$(“.otableDiv”).css({'display':'table'});
});
});

你能找一个能用的JSFIDLE吗?Thanksry with visibility:hiddenif I add“visibility”:隐藏在$('#example')下面:hidden,然后当单击show按钮时,隐藏的div不会显示,因为在该单击中需要设置“可见性”:“可见”而不是“显示”:“table”Hi Nico如果我使用以下代码,则隐藏的div不会显示:$(“#btn”)。单击(function(){alert(9999);$(.otableDiv”).css({'visibility':'visible});