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

Question

I am working on displaying a table that lists things based on what state was selected in HighMaps during drill down:

Code Snippet:

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

The table is dynamically generated by taking data from DB for each state using PHP. Table structure looks like this:

 <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>

The generated table output that does inside .html('') looks like this:

 $('#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>');

Everything works well when the list of companies is small. Once The number of companies per state gets bigger and the generated table code becomes longer things stop working. I tested it out. If I take the part of generated code that is too long and delete half of it then everything starts working again.

Is there a limit on how many characters can go inside .html(); ? Is there a more efficient way to display these tables?

Answer 1

What about using the append function within some specific selector like the one you are using currently $("#table").append(); check the link mentioned below:

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