javascript - クラスをhtml要素動的に追加する

Question

javascriptを使用してhtmlで動的テーブルを作成しています。ここにJavaScriptコードの一部があります。

var tr = $('<tr/>');
$(tr).append('<td>' + p1 + '</td>');
$(tr).append('<td>' + p2 + '</td>');
$(tr).append('<td>' + p3 + '</td>');
$(tr).append('<td>' + p4 + '</td>');
$(tr).append('<td>' + item.status + '</td>');
$(tr).append('<td><button class=\"btn\" onclick=\"join(' + item.gameId + ');\">Join</button></td>');
$('tbody').append(tr);

行要素にクラス (「エラー」または「成功」) を追加したいと考えています。私は試した

tr.className = "success";

これはうまくいきませんでした。

Answer 1

これはうまくいくはずです：

$(tr).addClass("success");

Answer 2

jQuery を使用しているようです。以下を使用してみてください。$(tr).addClass('success')

また、不要な追加が多すぎるため、コードを次のように最適化できます。

var tr = '<tr><td>' + p1 + '</td>' +
    '<td>' + p2 + '</td>' +
    '<td>' + p3 + '</td>' +
    '<td>' + p4 + '</td>' +
    '<td>' + item.status + '</td>' + 
    '<td><button class=\"btn\" onclick=\"join(' + 
    item.gameId + 
    ');\">Join</button></td></tr>'; 
$('tbody').append(tr);