CODEWITHSUNDEEP
jquerycsstwitter-bootstrap-3
randoms
randoms

Reputation: 2783

bootstrap css issue when dynamicly adding row to table

I have a simple table, using bootstrap css. The table has the following classes

<table id="data-table" style="word-wrap: break-word" class="table table-condensed table-striped">

This works fine, when i add rows directly through the html file, but when i try to use javascript to append a new row, the striped css does not work as intended.

var table = $('#data-table');
table.children('tbody').append("<tr><td>User3</td><td>Real name 3</td><td>undefined</td><tr>");

JSFiddle example: https://jsfiddle.net/mtropkdx/

Is there any css refresh that needs to be executed to get the css working?

Edit: When i insepct the DOM i can se that there are empty between the inserted rows, i guess thats why i cant see the striped ones. But why are they there?

Upvotes: 0

Views: 183

Answers (1)

Tieson T.
Tieson T.

Reputation: 21191

Your ending <tr> tag is another open tag. The normalized HTML is creating an empty row (use your dev console to inspect the fiddle's output window). This:

table.children('tbody').append("<tr><td>User3</td><td>Real name 3</td><td>undefined</td></tr>")

works just fine.

Updated fiddle: https://jsfiddle.net/mtropkdx/1/

Upvotes: 1

Related Questions