使用 Javascript switch 语句在 DIV 中显示 HTML 表答案

【问题标题】：Display HTML table inside a DIV using Javascript switch statement使用 Javascript switch 语句在 DIV 中显示 HTML 表
【发布时间】：2015-02-10 22:46:32
【问题描述】：

我正在显示一个表格，该表格根据在深入分析期间在 HighMaps 中选择的状态列出事物：

代码片段：

                switch (e.point.name) {
                    case 'California':
                        $('#table').html('');
                        break;
                    case 'Virginia':
                        $('#table').html('');
                        break;
                    default:
                        $('#table').html('');
                        break;
                }
<div id="table"></div>

表格是通过使用 PHP 从数据库中获取每个状态的数据来动态生成的。表结构如下：

 <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h3 class="panel-title text-center">Company List - State</h3>
                        </div>
                        <table class="table table-hover" id="dev-table">
                            <thead>
                                <tr>
                                    <th>Company Name</th>
                                    <th>County</th>
                                    <th>Details</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Company 1</td>
                                    <td>Test County</td>
                                    <td>Company details.</td>
                                </tr>
                                <tr>
                                    <td>Company 2</td>
                                    <td>Test County</td>
                                    <td>Company details.</td>
                                </tr>
                                    <td>Company 3</td>
                                    <td>Test County</td>
                                    <td>Company details.</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

在 .html('') 中生成的表格输出如下所示：

 $('#table').html('<div class="container"> <div class="row"><div class="col-md-12"><div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title text-center">Company List - California</h3></div><table class="table table-hover" id="dev-table"><thead><tr><th>Company Name</th><th>County</th><th>Details</th></tr></thead><tbody><tr><td>Company 1</td><td>Test County</td><td>Company details are available to ACMA members only.</td></tr><tr><td>Company 2</td><td>Test County</td><td>Company details are available to ACMA members only.</td></tr><td>Company 3</td><td>Test County</td><td>Company details.</td></tr></tbody></table></div></div></div></div>');

当公司列表很小时，一切都很好。一旦每个州的公司数量变大并且生成的表格代码变长，事情就会停止工作。我测试了它。如果我将生成的代码部分太长并删除其中的一半，那么一切都会重新开始。

.html() 中的字符数是否有限制？ ?有没有更有效的方式来显示这些表格？

【问题讨论】：

好吧，有五十个州。所以在内存中预渲染总是更快。使用documentFragment 在内存中构建表并将其附加到table。
谢谢。有没有我可以看一下的示例 sn-p ？我的 JS 知识非常有限，但是当我看到示例时，我很快就能掌握。
您正在用 PHP 构建 HTML？是通过 AJAX 返回的吗？
没有。我有一个 php 函数，它在从数据库中提取代码后生成代码，然后我“清理/格式化”它并将其复制/粘贴到脚本中。
您手动执行此操作？

标签： javascript php rendering highmaps

【解决方案1】：

如何在某些特定选择器中使用附加功能，例如您当前使用的选择器 $("#table").append();检查下面提到的链接：

http://api.jquery.com/append/

【讨论】：