bootstrap css issue when dynamicly adding row to table

Question

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?

Tieson T. · Accepted Answer · 2017-02-09 08:03:21Z

1

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/

answered Feb 9, 2017 at 8:03

Tieson T.

21.2k6 gold badges82 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

randoms Over a year ago

percect, thanks. Hard to stop those errors sometimes.

Collectives™ on Stack Overflow

bootstrap css issue when dynamicly adding row to table

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related