Javascript 将行附加到网格

我想在用户单击按钮后将一行附加到此网格。我尝试过使用一些简单的JavaScript和

innerHTML

，其中我将一个用HTML格式化的字符串分配给最后一行末尾的空

div

部分（

“appendDataHere”

）。我遇到的问题是，该行没有直接附加到其标题行的下方–无论我如何使用

标记，都存在间隙。我还希望能够在不删除之前添加的行的情况下继续追加行

函数appendData（）{
var driver=document.getElementById（“selDriver”）.value；
var皮卡=document.getElementById（“SEL皮卡”）.value；
var-dropOff=document.getElementById（“seldopoff”）.value；
var numPsngers=document.getElementById（“selNumPsngers”）.value；
document.getElementById（“appendDataHere”）.innerHTML=
“”+驱动程序+
“+皮卡+
“+”衰减+
“”+numPsngers+
“下午7:03:00”+
"" +
"";
}

.grid项{
背景色：#ffffff；
边框：1px实心rgba（0,0,0,0.8）；
填充：20px；
字体大小：20px；
文本对齐：居中；
}
.网格容器2{
显示：网格；
网格模板列：自动；
填充物：5px；
边缘顶部：50px；
边缘底部：50px；
右边距：150px；
左边距：150像素；
}
.表格项目标题二{
背景色：#00cc00；
颜色：#ffffff；
边框：1px实心rgba（0,0,0,0.8）；
填充：20px；
字体大小：20px；
文本对齐：居中；
}

分配给
从…起
到
乘客人数
分配
Dr0
Dr1
Dr2
大街123号
1600便士。大道
大街123号
1600便士。大道
1.
2.
分配给
从…起
到
乘客人数
时间
不露面
完成

希望这对您有所帮助，您需要更多的CSS来修复行之间的间隙，但现在它正按照您的预期工作

我在

innerHTML

之前添加了一点

+=

，这样您就可以追加越来越多的内容，如果您不想追加多个内容，只需像以前那样分配它（在问题中）

为了达到这个结果，我改变了div的层次结构

函数appendData（）{
var driver=“driver val”
var pickup=“pickup val”
var dropOff=“dropOff val”
var numPsngers=“pssngr的数量”
document.getElementById（“表id”）.innerHTML+=
“”+驱动程序+
“+皮卡+
“+”衰减+
“”+numPsngers+
“下午7:03:00”+
"" +
" ";
}

.grid项{
背景色：#ffffff；
边框：1px实心rgba（0,0,0,0.8）；
文本对齐：居中；
垫面：5px；
垫底：5px；
}
.表格项目标题二{
背景色：#00cc00；
颜色：#ffffff；
边框：1px实心rgba（0,0,0,0.8）；
填充：20px；
字体大小：20px；
文本对齐：居中；
}

添加
分配给
从…起
到
乘客人数
时间
不露面
完成

请添加您正在使用的javascript。添加了javascript。您应该将：

更改为

。是否可以添加足够的代码来重现您的问题？我没有看到id为

selDriver

，

selspick

的元素。在哪里调用了

appendData

？添加了一些代码和问题的屏幕截图。