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

时间:2015-02-10 22:46:32

标签: javascript php rendering highmaps

我正在努力展示一个表,根据在深入研究期间在HighMaps中选择的状态来列出内容:

代码段:

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

通过使用PHP从每个状态的DB获取数据来动态生成表。表结构如下所示:

 <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(&#39;&#39;)内生成的表格输出如下所示:

 $('#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(); ?是否有更有效的方式来显示这些表?

1 个答案:

答案 0 :(得分:0)

如何在某个特定的选择器中使用append函数,比如当前使用的$(&#34;#table&#34;)。append();检查下面提到的链接:

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