Jquery 方法插入将自身填充到一个单元格中的行。为什么？

我正在尝试使用jQuery将单元格添加到此表的右侧，单击时位于活动行下方。我将其归结为插入一行，该行在单击时起作用，并在CSS的帮助下进行切换

出于某种原因，在活动行下方注入HTML的.after（）方法似乎将所有HTML填充到第一个单元格中，而不是将其注入表中并像正常行一样工作。我不太清楚为什么。我认为这可能与我的CSS和我为切换行显示而设计的解决方案有关，但我可能错了。更改CSS显示模式并不能解决此问题

任何帮助都将不胜感激

CSS:

HTML:

废话
废话
废话
废话
废话
废话
废话
废话
废话
废话
废话
废话

JS:

$（文档）.ready（函数（）{
$（'body'）。在（'click'，'table tr'，function（）上{
var行=$（this）.closest（'tr'）；
if（row.next（）.hasClass（“元数据”））{
row.next（）.toggleClass（“活动”）；
}
否则{
$（row.after（'somethingsomethingsomethingsomethingsomethingsomething'）；
}
});
});

将

display:none

更改为

display:block

，因此插入的行的行为类似于

块

元素，而不像

表行

。您需要设置

显示：表格行

另外，在新行中添加一个空的第一列，使其列与上面的行保持对齐

请参阅下面的代码片段

$（文档）.ready（函数（）{
$（'body'）。在（'click'，'table tr'，function（）上{
var行=$（this）.closest（'tr'）；
if（row.next（）.hasClass（“元数据”））{
row.next（）.toggleClass（“活动”）；
}否则{
$（row.after（'somethingsomethingsomethingsomethingsomethingsomething'）；
}
});
});
.metadata{
显示：无；
}
.metadata.active{
显示：表格行；
}
桌子{
字体系列：arial，无衬线；
边界塌陷：塌陷；
宽度：100%；
右边距：20px；
盒影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）；
}
运输署，
th{
边框底部：1px实心#ccc；
右边框：1px实心#ccc；
文本对齐：左对齐；
填充：8px；
字体大小：正常；
}
th{
文字装饰：无；
字体大小：15px；
}
tr:n个孩子（偶数）{
背景色：#F5；
}
.内容：悬停{
背景色：#99d1db；
光标：指针；
}

废话
废话
废话
废话
废话
废话
废话
废话
废话
废话
废话
废话

      .metadata {
                display: none;
            }

        .metadata.active {
                display: block;
            }
        table {
            font-family: arial, sans-serif;
            border-collapse: collapse;
            width: 100%;
            margin-right:20px;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        }

        td, th {
            border-bottom: 1px solid #ccc;
            border-right: 1px solid #ccc;
            text-align: left;
            padding: 8px;
            font-weight: normal;
        }

        th {
            text-decoration: none;
            font-size: 15px;

        }
        tr:nth-child(even) {
            background-color: #F5F5F5;
        }

    .content:hover {
        background-color: #99d1db;


cursor: pointer;
}

    <div class="table" style="text-align:center;">

        <table>
        <tbody>
        <tr>
            <th></th>
            <th >blah</th>
            <th>blah</th>
            <th>blah</th>
            <th>blah</th>
            <th>blah</th>
            <th>blah</th>

        </tr>
        <tr class="content">
            <td><input type="checkbox" name="tablebox" value="checker"></td>
            <td>blah</td>
            <td>blah</td>
            <td>blah</td>
            <td>blah</td>
            <td>blah</td>
            <td>blah</td>
        </tr>
</tbody>
</table>

$(document).ready(function(){
    $('body').on('click','table tr', function(){
    var row =  $(this).closest('tr') ;
    if (row.next().hasClass("metadata")) {

        row.next().toggleClass("active");

    }
    else {
        $(row.after('<tr class="content metadata active" ><td>something</td><td>something</td><td>something</td><td>something</td><td>something</td></tr>')); 

    }
    });
});