包含外部html表数据

时间:2017-06-20 12:52:59

标签: javascript jquery html

好的,我有一个HTML jquery tablesorter网页。而不是嵌入所有的" td"在同一个文件里面的标签,我想从一个单独的文件中加载它们。原因是数据非常大,并且它是模块化所必需的。这是我到目前为止所尝试的......

        <div id="demo"><table class="tablesorter">
<script src="https://www.w3schools.com/lib/w3.js"> w3.includeHTML();</script>
        <br>
                <!-- Table Head -->
                <thead>
                    <tr>
                        <th>Sensor</th> <!-- disable dragtable on this column -->
                        <th class="drag-enable">c1</th>
                        <th class="drag-enable">c2</th>
                        <th class="drag-enable">c3</th>
                        <th class="drag-enable">c4</th>
                        <th class="drag-enable">c5</th>
                        <th class="drag-enable">c6</th>
                    </tr>
                </thead>
                <!-- Table Footer -->
                <tfoot>
                    <tr><th>c1</th><th>c2</th><th>c3</th><th>c4</th><th>c5</th><th>c6</th><th>c7</th></tr>
                </tfoot>
                <!-- Table Content -->
                <tbody w3-include-html="C:\Users\user\Desktop\new_test\tabledata.html"> 
                </tbody>
            </table>
        </div>

2 个答案:

答案 0 :(得分:0)

根据我的理解,您尚未正确初始化w3.includeHTML()方法。

问题是您需要在html代码的末尾初始化w3.includeHTML();

尝试以下代码:

<!DOCTYPE html>
<html>
<script src="https://www.w3schools.com/lib/w3.js"></script>
    <body>
    <div id="demo">
    <table class="tablesorter">        
            <br>
                    <!-- Table Head -->
                    <thead>
                        <tr>
                            <th>Sensor</th> <!-- disable dragtable on this column -->
                            <th class="drag-enable">c1</th>
                            <th class="drag-enable">c2</th>
                            <th class="drag-enable">c3</th>
                            <th class="drag-enable">c4</th>
                            <th class="drag-enable">c5</th>
                            <th class="drag-enable">c6</th>
                        </tr>
                    </thead>
                    <!-- Table Footer -->
                    <tfoot>
                        <tr><th>c1</th><th>c2</th><th>c3</th><th>c4</th><th>c5</th><th>c6</th><th>c7</th></tr>
                    </tfoot>
                    <!-- Table Content -->
                    <tbody w3-include-html="C:\Users\user\Desktop\new_test\tabledata.html"> 
                    </tbody>
                </table>
            </div>
      <script>
        w3.includeHTML();
      </script>
</body>
</html>

试试这个,如果您遇到问题,请告诉我。

答案 1 :(得分:0)

我得到了这样的工作:

            <table id="table" class="tablesorter">

                <script src="columndata.js"></script>

            </table>

然后在.js文件中我只有一个变量和document.write。非常简单,有效。