Javascript 返回相同数量的行

下面的代码允许我将值从

绿色水果表

移动到

随机水果表

，反之亦然，但问题是，在我将所有值从

绿色水果表

移回

随机水果表

后，所有值作为一行返回，但我希望它返回值就像最初的样子。有什么简单的方法可以解决这个问题吗？如果有任何建议，我们将不胜感激

var obj={}；
var obj2={}；
var key=“红色水果”；
obj[key]=[“苹果”、“樱桃”、“草莓”]；
var myArray=[]；
myArray.push（obj）；
var key2=“绿色水果”；
obj[key2]=[‘西瓜’、‘榴莲’、‘Avacado’]；
var myArray2=[]；
myArray2.推力（obj）；
var key3=“随机果实”；
obj2[key3]=[‘猕猴桃’、‘石榴’、‘蜜露’、‘李子’、‘芒果’、‘酸橙’、‘菠萝’、‘红星’、‘哈密瓜’、‘蓝莓’]；
var myArray3=[]；
myArray3.推送（obj2）；
函数重绘（obj）{
变量$header=$（“”），
cols=0，
bodyString=“”；
$。每个（对象、功能（键、值）{
cols=Math.max（cols，values.length）；
$header.append（$（''）.text（key））；
});
对于（变量i=0；i0）{
bodyString+=（“”）；
}
bodyString+=（''+obj2[key3][index]+''）；
});
bodyString+=''；
头串+=（“+”建议水果“+”）；
$（'.carsclass tbody'）.html（bodyString）；
$（'.carsclass thead'）.html（头串）；
}
函数侦听器（obj）{
$（文档）.ready（函数（）{
$（文档）。在（“单击”上，“#carsid td”，函数（）{
data=this.innerHTML；
k1=Object.keys（obj2）.find（k=>obj2[k].indexOf（数据）>=0）
index=obj2[k1].indexOf（数据）；
obj2[k1]。拼接（索引，1）；
obj[key2]。推送（数据）；
var元素=$（this.detach（）；
$（'#fruitsid>tbody'）.append（''+element.html（）+''）；
});
});
$（文档）.ready（函数（）{
$（'body'）。在（'click'，'td.new green fruit'，function（）上{
data2=this.innerHTML；
k2=Object.keys（obj）.find（k=>obj[k].indexOf（data2）>=0）
index2=obj[k2].indexOf（数据2）；
obj[k2]。拼接（index2，1）；
obj2[key3]。推送（数据2）；
$（this.parent（）.detach（）；
var element2=$（this.detach（）；
$（“#carsid>tbody”）.append（“”+element2.html（）+“”）；
});
});
}
重画（obj）；
听者（obj）
.class{
字体系列：开放式SAN；
}
.中心{
显示器：flex；
调整内容：中心
}
表1.1.1{
左边框：1px实心#AAA5A4；
右边框：1px实心#AAA5A4；
颜色：#0080ff；
字体大小：正常；
边框底部：1px实心#AAA5A4；
垫底：5px；
}
表1.1技能稳定{
浮动：左；
边界塌陷：塌陷；
宽度：70%
}
表1.2{
浮动：左；
宽度：70%表格行：固定；
}
表1.2.1技术稳定性td{
左边框：1px实心#AAA5A4；
右边框：1px实心#AAA5A4；
填充顶部：8px；
左侧填充：11px；
字体大小：15px；
}
div{
边缘底部：50px；
}
.新的绿色水果{
颜色：青柠；
}
表1.表2.1{
填充：8px 15px；
文本对齐：居中；
字体大小：15px；
边界半径：25px；
背景色：#2196f3；
颜色：白色；
}
表1.表4{
字体大小：正常；
边界：0；
填充：10px0；
}
为了解决这个问题，我在随机结果中添加了一些
数据
属性，稍后我将使用这些属性获取要插入的正确
行
和
列。在下面的代码中添加了一些注释以进行导航

可能不是最好的实现，但类似的东西应该会对您有所帮助。（参见代码片段）



var obj={}
变量obj2={}
变量键='红色水果'
obj[key]=“苹果”、“樱桃”、“草莓”]
var myArray=[]
myArray.push（obj）
var key2=‘绿色水果’
obj[key2]=“西瓜”、“榴莲”、“Avacado”]
var myArray2=[]
myArray2.推力（obj）
var key3=‘随机果实’
obj2[key3]=“猕猴桃”、“石榴”、“蜜露”、“李子”、“芒果”、“酸橙”、“菠萝”、“红果”、“哈密瓜”、“蓝莓”]
var myArray3=[]
myArray3.推送（obj2）
函数重绘（obj）{
变量$header=$（''），
cols=0，
bodyString=''
$。每个（对象、功能（键、值）{
cols=Math.max（cols，values.length）
$header.append（$（''）.text（键））
})
对于（变量i=0；i0）{
bodyString+=（“”）
}
//添加数据行和数据列属性
bodyString+=（''+obj2[key3][index]+''）
})
bodyString+=''
头串+=（“+”建议水果“+”）
$（'.carsclass tbody'）.html（bodyString）
$（'.carsclass thead'）.html（头串）
}
函数侦听器（obj）{
$（文档）.ready（函数（）{
$（文档）.on（'click'，'#carsid td'，函数（）{
data=this.innerHTML
k1=Object.keys（obj2）.find（k=>obj2[k].indexOf（数据）>=0）
index=obj2[k1]。indexOf（数据）
obj2[k1]。拼接（索引，1）
obj[key2]。推送（数据）
var element=$（this）.clone（）//克隆以将占位符保留在随机结果中
$（this）.replaceWith（“”）//并删除其内容。
element.addClass（'new-green-fruit'）
//使用outerHTML获取水果的全部属性，包括行和列
$（'fruitsid>tbody'）。追加（'