Javascript 如何创建向下钻取表行

我正在使用jQuery创建一个附加数据的表。当前创建的表如下所示

我想再添加两个字段作为向下钻取。你能告诉我怎么做吗

附加数据的代码

 $("#tableid").append("<tr><td> Product </td> <td >" + Day[0].substring(5, 11) + "</td> <td>" + Day[1].substring(5, 11) + "</td> <td>" + Day[2].substring(5, 11) + "</td><td>" + Day[3].substring(5, 11) + "</td><td>" + Day[4].substring(5, 11) + "</td><td>" + Day[5].substring(5, 11) + "</td><td> Current </td><td> Weekly </td><td> Monthly </td></tr>");
 for (var i = 1; i <= result.length; i++) {
     $("#tableid").append("<tr><td>" + result[i].product + "</td><td><img src='images/" + result[i].Day01 + ".png' /></td><td><img src='images/" + result[i].Day02 + ".png' /><td><img src='images/" + result[i].Day03 + ".png' /></td><td><img src='images/" + result[i].Day04 + ".png' /></td><td><img src='images/" + result[i].Day05 + ".png' /></td><td><img src='images/" + result[i].Day06 + ".png' /></td><td><img src='images/" + result[i].Day07 + ".png' /></td><td><img src='images/" + result[i].WeeklyWeather + ".png' /></td><td><img src='images/" + result[i].MonthlyWeather + ".png' /></td></tr>");
 }

$（“#tableid”）.append（“产品”+天[0]。子串（5,11）++天[1]。子串（5,11）++天[2]。子串（5,11）++天[3]。子串（5,11）++天[4]。子串（5,11）++天[5]。子串（5,11）++当前周报）；
对于（var i=1；i
为结果中的每个项目添加另一个tr。根据需要放置数据
通过将内容的高度设置为0隐藏此行（对于切换动画。如果不需要动画，只需在tr上设置
display:none
）
单击
tr
时，下一行（可展开）上的代码do
toggleClass（）
，该类将删除
高度：0
，并公开内容

var结果=[
{产品：'ESB'，第01天：'yes'，第02天：'yes'，第03天：'yes'，第04天：'yes'，第05天：'yes'，第06天：'yes'，第07天：'yes'，周天气：'rain'，月天气：'rain'}，{产品：'ML'，第01天：'yes Day02:'yes第03天：'yes第04天：'yes第05天：'yes'，第06天：'yes第07天：'yes'，周天气：'rain'，月天气：'rain'}，{产品：'ML'，第01天：'yes'，第02天：'yes'，第03天：'yes'，第04天：'yes'，第05天：'yes'，第06天：'yes'，第07天：'yes'，每周天气：'rain'，每月天气：'rain'}
];
$（“#tableid”）。追加（“产品12/09 13/09 14/0915/0916/0917/09当前每周/每月”）；
对于（变量i=0；i

*{
框大小：边框框；
}
桌子{
边界间距：0；
边界塌陷：塌陷；
}
tr:n个孩子（偶数）{
光标：指针；
}
tr：第一个孩子{
背景：银；
}
tr:n第n个孩子（4n+4）td{
背景：#ccc；
}
运输署{
边框：1px实心#3e3e；
填充物：5px；
}
.可扩展分区{
过渡：高度，填充。3秒轻松；
填充：0 10px；
}
.可扩展：非（.expand）td{
填充：0；
边框底色：透明；
}
.可扩展：不（.expand）div{
身高：0；
溢出：隐藏；
}
.expandable.expanddiv{
填充：10px；
}

你的意思是这样的吗？当然。这正是我想要的。问题是我使用的表格格式。我必须更改所有内容，对吗？
我必须更改所有内容
-不，你不需要。你只需为每个结果添加一行，并将所需的数据放在那里。如果你要创建小提琴，我将提供帮助您可以设置它。@Mosh我可以将数据附加到表中。但是我不能在jQuery中添加div标记，如下所示。
我不能在jQuery中添加div标记
为什么？
在jQuery中
您的意思是什么？您的意思是使用jQuery吗？谢谢Mosh Feu，这正是我需要的。但它没有隐藏“扩展内容”。它仍然出现。当选择行时，它确实改变了填充，就是这样。它是如何被修复的？我不明白。你的意思是在我的答案中还是在你的网站中？在我的网站中。如图所示（ML在单击行后展开。不展开它会像碳一样显示。它实际上从不隐藏）你使用什么浏览器？在Firefox和google chrome上都试用过。得到了相同的结果。我在“]]>”中使用HTML。这就是原因吗？