bootstrap контекстные классы dosen't work with append jQuery

Question

Я использую append для добавления tr и td в свою таблицу, но когда я добавляю цвет в таблицу строк, контекстные классы не работают, но другой класс, например col-md-, отлично работает с добавлением но контекстуальные классы не работают.

Как добавить контекстные классы с добавлением в таблицу?

Вот мой стол

<table class="table table-bordered"> 
    <thead> 
    <tr class="info"> 
     <th>Row</th> 
     <th>Score</th> 
    </tr> 
    </thead> 
    <tbody id="tbody"> 

    </tbody> 
</table> 

А вот мой JS код:

for(var i=0 ; i<array.length ; i++){ 
    //the class in tr dose't work 
    $('#tbody').append('<tr class="success">'); 
    $('#tbody').append("<td>"+ (i+1) +"</td>"); 
    $('#tbody').append('<td>'+array[i].score.toFixed(2)+'</td>'); 
    $('#tbody').append('</tr>'); 
} 

А вот Jsfiddle результат

Answer 1

Вы не можете добавлять как что: HTML строка вам добавление должно быть хорошо сформировано. Первое добавление добавит <tr class="success"></tr>; для второго и третьего браузер добавит новый <tr></tr>.

Вот как это сделать:

var array = [{ score: 1.0 }, { score: 2.0 } ]; 
 

 
for (var i = 0; i < array.length; i++) { 
 
    //the class in tr dose't work 
 
    $('#tbody').append(
 
    '<tr class="success">' 
 
    + "<td>" + (i + 1) + "</td>" 
 
    + '<td>' + array[i].score.toFixed(2) + '</td>' 
 
    + '</tr>' 
 
); 
 
}

.success { color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table class="table table-bordered"> 
 
    <thead> 
 
    <tr class="info"> 
 
     <th>Row</th> 
 
     <th>Score</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody id="tbody"> 
 

 
    </tbody> 
 
</table>