trHtml="<tr>"+
"<th style='width: 5%'><input class='awsui-checkbox' id='checkboxStyle' value='' type='checkbox'/></th>"+
"<th style='width: 6%'>序号</th>"+
"<th style='width: 8%'>类型</th>"+
"<th style='width: 23%'>公司</th>"+
"<th style='width: 23%'>付款方</th>"+
"<th style='width: 12%'>金额</th>"+
"<th style='width: 15%'>日期</th>"+
"<th style='width: 8%'>状态</th>"+
"</tr>"
$("thead").append(trHtml)
直接用<input class='awsui-checkbox' id='checkboxStyle' value='' type='checkbox'/>就好
给你思路，你自己实现：
因工作原因那个按钮或者其他，添加点击事件；
在外面定一个全局变量，用来记录使显示还是不显示；
点击事件中，判断显示变量；
如果是显示，用javascript/jquery，在本行下插入一行，并赋值，具体方法是，找到本td的父tr，在tr后追加html新的tr，并填充内容（例：可以用jquery的td:contains('xx').parent().append("<tr ><td>..."),在赋值内容$("#abc").val("xxxxxx"))；如果你的那行本身存在，那就更容易了，找到对应的那个tr，可以设置高度，并且还可以用jquery加一些动画效果slideDown 这类的，然后填充内容。
如果是不显示，找到对应新加的那行tr，hide或这直接删掉；或者变回原来那样，看自己需求。
总之就是，要会怎么拿td和tr。好多方法都可以，自己百度下吧。
var T=document.getElementsByTagName('table').item(0)var td=T.getElementsByTagName('td')
var len=td.length
alert(len)
for(var i=0i<leni++){
td.item(i).innerHTML=i
}
