我的html表中不需要的多余行

Question

I have this below code:

{

    str = str + "<thead><tr><th class=tableGridFontHeader>Condition</th>";
    str = str + "<th class=tableGridFontHeader>UnAdjusted Value</th></tr></thead>";

    str = str + "<tbody></tbody><tr><td class=tableGridFont align=center>B-Average</td>";
    str = str + "<td>" + avgUnAdjTxt + "</td></tr>";

    str = str + "<tr><td class=tableGridFont align=center>C-Rough</td>";
    str = str + "<td>" + accounting.formatMoney(roughUnAdjTxt, "$", 0) + "</td></tr></tbody>";

$("#blackBookWholeSaleTable").html(str);

My css:

.tableGridFontHeader
{
font-size:16px;
color:#09364b;
background-color:#bdd2dc;
padding-left: 15px;
}

.tableGridFont
{   
font-size:14px;
color:#555f60;
padding-left: 15px;
}
}

I am seeing an extra row when I reload this table:

I can't remove it no matter what I do. When I look at the source I see an extra tbody.

Answer 1

In the third row, you have closed the tbody.

str = str + "<tbody></tbody><tr><td class=tableGridFont align=center>B-Average</td>";

change this to:

str = str + "<tbody><tr><td class=tableGridFont align=center>B-Average</td>";