SOURCE

// var trHTML = "<tr><td>1</td><td>1</td><td>1</td><td>1</td></tr>"
// $("#table1").append(trHTML);
function CreateTable(flag) {
  for (var i = 0; i < 5; i++) {
    var tr = $("<tr class='YB'></tr>");
    var td = $("<td id='" + i + "'>" + (i + 1) + "</td><td>" + (i + 2) + "</td><td>" + (i + 3) + "</td><td>" + (i + 4) + "</td><td>" + (i + 5) + "</td><td>" + (i + 6) + "</td><td>" + (i + 7) + "</td><td>" + (i + 8) + "</td>");
    if (flag == 1) {} else {
      var tr=$("<tr class='Details'></tr>");
      

}
    tr.append(td);
    $("#tbody1").append(tr);

  }
}

<button onclick="CreateTable('1')">
  生成表格
</button>
<button style="background:#9932CC" onclick="ChangeColor()">
  第一行变色
</button>
<button style="background:#ABC327" onclick="CreateTable(2)">
  生成Detail
</button>
<table id='table1'>
  <thead>
    <th>
      序号
    </th>
    <th>
      序号
    </th>
    <th>
      序号
    </th>
    <th>
      序号
    </th>
    <th>
      序号
    </th>
        <th>
      序号
    </th>
      <th>
      序号
    </th>
      <th>
      序号
    </th>
  </thead>
  <tbody id="tbody1">
  </tbody>
</table>

#table1 tr td {
  border: 1px solid black;
  text-align: center;
}

#table1 {
  margin: 0 10px 10px 10px;
  border-collapse: collapse;
}

button {
  background: #00FA9A;
  margin: 10px;
  color: white;
}

#table1 thead {
  background: #82A6F5;
  color: white;
}

#table1 tr td {
  border: 1px solid #82A6F5;
  background: #FFE4E1； color：#5ED5D1；
}