添加新行'；使用CSS、ajax和jQuery从s到div生成的表

我对这个问题感到抱歉。我正在研究一个使用div标记生成表的选项，这很好。我试图让用户使用jQuery添加或删除一行。我的问题是，添加的行没有填充所有列。整行将添加到列标题1中。我已经尽了一切努力来解决这个问题，但没有任何效果，你们是我最后的希望，这就是为什么我把我的问题贴在这里

我试图制作一个可行的snipchat，添加新行在这里不起作用，它在我的浏览器中

$（'#addrow'）。单击（函数（）{
变量长度=$（'.sl'）.length；
变量i=parseInt（长度）+parseInt（1）；
var newrow=$（“#next”）.append（'BacteriaLow lifeetidenhitmanassassinlocal bossbossgoddar'）；
});
//正在删除此处的事件
$（'body'）。在（'click'，'btnRemove'，函数（）上{
$（this）.closest（'div'）.remove（）
});
div.blueTable{
边框：1px实心#1C6EA4；
背景色：#EEEEEE；
宽度：100%；
文本对齐：左对齐；
边界塌陷：塌陷；
}
.divTable.blueTable.divTable单元格、.divTable.blueTable.divTableHead{
边框：1px实心#AAAAA；
填充物：3px2px；
}
.divTable.blueTable.divTableBody.divTableCell{
字体大小：13px；
}
.divTable.blueTable.divTableRow:n子级（偶数）{
背景：#D0E4F5；
}
.divTable.blueTable.divTable标题{
背景：#1C6EA4；
背景：-moz线性梯度（顶部，#5592bb 0%，#327cad 66%，#1C6EA4 100%）；
背景：-webkit线性梯度（顶部，#5592bb 0%，#327cad 66%，#1C6EA4 100%）；
背景：线性梯度（至底部，#5592bb 0%，#327cad 66%，#1C6EA4 100%）；
边框底部：2个实心#4444；
}
.divTable.blueTable.divTableHeading.divTableHead{
字体大小：15px；
字体大小：粗体；
颜色：#FFFFFF；
左边框：2px实心#D0E4F5；
}
.divTable.blueTable.divTableHeading.divTableHead:第一个孩子{
左边界：无；
}
.blueTable.桌脚风格{
字体大小：11px；
}
.blueTable.tableFootStyle.links{
文本对齐：右对齐；
}
.blueTable.tableFootStyle.links链接a{
显示：内联块；
背景：#1C6EA4；
颜色：#FFFFFF；
填充：2px8px；
边界半径：5px；
}
.blueTable.outerTableFooter{
边界顶部：无；
}
.blueTable.outerTableFooter.tableFootStyle{
填充物：3px 5px；
}
/*DivTable.com*/
.divTable{display:table；}
.divTableRow{显示：表行；}
.divTableHeading{显示：表格标题组；}
.divTableCell、.divTableHead{display:表格单元格；}
.divTableHeading{显示：表格标题组；}
.divTableFoot{显示：表页脚组；}
.divTableBody{display:表行组；}

标题1
标题2
总目3
总目4
总目5
总目6
细菌
低寿命
学徒
杀手
莎辛那
本地老板
老板
教父


添加新行



提交

如果要添加长HTML字符串，请使用反勾号（`）进行插值-这允许您创建多行字符串
我建议您将（特别长的）HTML字符串放在单击处理程序之外。更干净，更容易追踪
您将整个HTML字符串附加到
#next
而不是您的表体容器
divTableBody
此外，所创建的列比所创建的单元格少一列
将
.parent（）
添加到您的
remove
函数中-现在它可以工作了

const tableRow=（i）=>{
返回`
细菌
低寿命
学徒
杀手
莎辛那
本地老板
老板
教父
`
}
$（'#addrow'）。单击（函数（）{
变量长度=$（'.sl'）.length；
变量i=parseInt（长度）+parseInt（1）；
var newrow=$（'.divTableBody'）.append（tableRow（i））；
});
//正在删除此处的事件
$（'body'）。在（'click'，'btnRemove'，函数（）上{
$（this）.closest（'div'）.parent（）.remove（）
});
div.blueTable{
边框：1px实心#1C6EA4；
背景色：#EEEEEE；
宽度：100%；
文本对齐：左对齐；
边界塌陷：塌陷；
}
.divTable.blueTable.divTable单元格，
.divTable.blueTable.divTable头{
边框：1px实心#AAAAA；
填充物：3px2px；
}
.divTable.blueTable.divTableBody.divTableCell{
字体大小：13px；
}
.divTable.blueTable.divTableRow:n子级（偶数）{
背景：#D0E4F5；
}
.divTable.blueTable.divTable标题{
背景：#1C6EA4；
背景：-moz线性梯度（顶部，#5592bb 0%，#327cad 66%，#1C6EA4 100%）；
背景：-webkit线性梯度（顶部，#5592bb 0%，#327cad 66%，#1C6EA4 100%）；
背景：线性梯度（至底部，#5592bb 0%，#327cad 66%，#1C6EA4 100%）；
边框底部：2个实心#4444；
}
.divTable.blueTable.divTableHeading.divTableHead{
字体大小：15px；
字体大小：粗体；
颜色：#FFFFFF；
左边框：2px实心#D0E4F5；
}
.divTable.blueTable.divTableHeading.divTableHead:第一个孩子{
左边界：无；
}
.blueTable.桌脚风格{
字体大小：11px；
}
.blueTable.tableFootStyle.links{
文本对齐：右对齐；
}
.blueTable.tableFootStyle.links链接a{
显示：内联块；
背景：#1C6EA4；
颜色：#FFFFFF；
填充：2px8px；
边界半径：5px；
}
蓝色