转阵的阵成列的jQuery [英] Transpose array of TDs into Columns jQuery
本文介绍了转阵的阵成列的jQuery的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
请帮我把细胞对应于列标题的一类，在相应的列。迭代应每列来完成，然后通过 table.temp TD阵列环和替换找到的第一个临时TD找到的第一个空单元格。
最终的结果应该类似于表中找到这里。
\r
\r\r
\r变量$ tempScanner = $（'table.temp TR TD'）;\r
变种tempArry = [];\r
$ tempScanner.each（函数（）{\r
tempArry.push（$（本））;\r
}）;\r
\r
tempArry = tempArry.sort（）; \r
TD，\r
日{\r
边框：1px的固体＃111;\r
填充：6像素;\r
}\r
\r
日{\r
字体重量：700;\r
}\r
\r
span.pull右{\r
浮动：权利;\r
文本对齐：权利;\r
}\r
\r
。一个，\r
。一个 {\r
背景色：#ACE;\r
}\r
\r
.B，\r
.B {\r
背景色：#FAF;\r
}\r
\r
。C，\r
。C {\r
背景色：#BAB;\r
}\r
\r
.D，\r
.D {\r
背景色：#ECA;\r
}\r
\r
.targetFound {\r
边界：2px的固体红;\r
} \r
＆LT;表样式=显示：块;类=温度＆GT;＆下; TBODY＆GT;＆下; TR＆GT;＆下; TD列跨度=2数据ID =1数据-CATG =一个类=一个＆GT;噢噢＆下;跨度类=右拉＆GT; kr.8＆下; /跨度＆GT;＆下; / TD＆GT;＆下; TD列跨度=2数据ID =7数据-CATG =b级=b的＆GT; PPPP＆下;跨度类=右拉＆GT; kr.10＆LT; / SPAN＆GT;＆LT; / TD＆GT;＆LT; TD合并单元格=2数据ID =12数据CATG =C级=C＆GT; KKKK＆所述;跨度类=右拉＆GT; kr.6＆下; /跨度＆GT;＆下; / TD＆GT;＆下; TD列跨度=2数据的id =2数据-CATG =一个类=一＆GT; FFFF＆下;跨度类=右拉＆GT; kr.8＆下; /跨度＆GT;＆下; / TD＆GT;＆下; TD列跨度=2数据ID =4数据-CATG =b的类=b的＆GT;咝＆下;跨度类=右拉＆GT; kr.10＆下; /跨度＆GT;＆下; / TD＆GT;＆下; TD列跨度=2数据ID =15数据-CATG = C级=C＆GT; VVVV＆LT;跨度类=右拉＆GT; kr.6＆LT; / SPAN＆GT;＆LT; / TD＆GT;＆LT; TD合并单元格=2数据ID =5数据 - CATG =b级=b的＆GT;至三＆下;跨度类=右拉＆GT; kr.10＆下; /跨度＆GT;＆下; / TD＆GT;＆下; TD列跨度=2数据ID =21 数据CATG =C级=C＆GT; LLLL＆LT;跨度类=右拉＆GT; kr.6＆LT; / SPAN＆GT;＆LT; / TD＆GT;＆LT; TD合并单元格=2数据ID =22数据CATG =A级=一个＆GT;嗯＆LT;跨度类=右拉＆GT; kr.9＆LT; / SPAN＆GT;＆LT; / TD＆GT;＆LT; TD合并单元格=2数据-ID =7数据CATG =b级=b＆GT; BBBB＆LT;跨度类=右拉＆GT; kr.12＆LT; / SPAN＆GT;＆LT; / TD＆GT;＆LT; TD colspan值= 2的数据ID =8的数据CATG =b级=b的＆GT; EEEE＆下;跨度类=右拉＆GT; kr.8＆下; /跨度＆GT;＆下; / TD＆GT;＆下; TD合并单元格=2数据ID =9数据CATG =C级=C＆GT; GGGG＆LT;跨度类=右拉＆GT; kr.6＆LT; / SPAN＆GT;＆LT; / TD＆GT ;＆LT; TD合并单元格=2数据ID =10数据CATG =C级=C＆GT; CCCC＆LT;跨度类=右拉＆GT; kr.6＆LT; / SPAN＆GT;＆LT ; / TD＆GT;＆LT; TD合并单元格=2数据ID =11数据CATG =C级=C＆GT; AAAA级＆LT;跨度类=右拉＆GT; kr.6＆LT; /跨度＆GT;＆下; / TD＆GT;＆下; TD列跨度=2数据的id =6的数据CATG =b级=b的＆GT; NNNN＆下;跨度类=右拉＆GT; KR。 10下; /跨度＆GT;＆下; / TD＆GT;＆下; TD列跨度=2数据ID =3数据-CATG =一个类=一个＆GT; ZZZZ＆下;跨度类=右拉＆GT ; kr.8＆下; /跨度＆GT;＆下; / TD＆GT;＆下; TD列跨度=2数据ID =13数据-CATG =C级=c的＆GT;嗯＆下;跨度类=上拉右＆GT; kr.6＆下; /跨度＆GT;＆下; / TD＆GT;＆下; TD列跨度=2数据ID =14数据-CATG =C级=c的＆GT; RRRR＆下;跨度类= 右拉＆GT; kr.6＆LT; / SPAN＆GT;＆LT; / TD＆GT;＆LT; TD合并单元格=2数据ID =17数据CATG =D级=D＆GT; HHHH＆LT;跨度类=右拉＆GT; kr.5＆LT; / SPAN＆GT;＆LT; / TD＆GT;＆LT; TD合并单元格=2数据ID =18数据CATG =D级=D＆GT ; UUUU＆LT;跨度类=右拉＆GT; kr.5＆LT; / SPAN＆GT;＆LT; / TD＆GT;＆LT; TD合并单元格=2数据ID =19数据CATG =D级= D＆GT; QQQQ＆下;跨度类=右拉＆GT; kr.5＆下; /跨度＆GT;＆下; / TD＆GT;＆下; TD列跨度=2数据ID =20数据-CATG =d的类=D＆GT; XXXX＆LT;跨度类=右拉＆GT; kr.5＆LT; / SPAN＆GT;＆LT; / TD＆GT;＆LT; / TR＆GT;＆LT; / TBODY＆GT;＆LT; /表＆gt;\r
\r
＆LT;表ID =tblGrid＆GT;\r
＆LT;＆TBODY GT;＆LT; TR＆GT;\r
百分位类=A合并单元格=2＆gt;将＆LT; /第i\r
百分位CLASS =B合并单元格=2＆GT; B＆LT; /第i\r
百分位类=C合并单元格=2＆GT; C＆LT; /第i\r
百分位类=D合并单元格=2＆GT; D＆LT; /第i\r
＆LT; / TR＆GT;\r
＆所述; TR类=emptyRow＆GT;＆下; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;＆下; TD列跨度=2类=b的＆GT;＆下; / TD＆GT; ＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT; / TR＆GT;＆LT;＆LT TR类= emptyRow＆GT;＆下; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;＆下; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;＆下; TD列跨度= 2类=c的＆GT;＆下; / TD＆GT;＆下; TD列跨度=2类=d的＆GT;＆下; / TD＆GT;＆下; / TR＆GT;＆下; TR类=emptyRow＆GT; ＆所述; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;＆下; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;＆下; TD列跨度=2类= c的＆GT;＆下; / TD＆GT;＆下; TD列跨度=2类=d的＆GT;＆下; / TD＆GT;＆下; / TR＆GT;＆下; TR类=emptyRow＆GT;＆下; TD列跨度= 2类=一个＆GT;＆下; / TD＆GT;＆下; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;＆下; TD列跨度=2类=c的＆GT; ＆所述; / TD＆GT;＆下; TD列跨度=2类=d的＆GT;＆下; / TD＆GT;＆下; / TR＆GT;＆下; TR类=emptyRow＆GT;＆下; TD列跨度=2类= 一个＆GT;＆下; / TD＆GT;＆下; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;＆下; TD列跨度=2类=c的＆GT;＆下; / TD＆GT; ＆所述; TD列跨度=2类=d的＆GT;＆下; / TD＆GT;＆下; / TR＆GT;＆下; TR类=emptyRow＆GT;＆下; TD列跨度=2类=一个＆GT; ＆LT; / TD＆GT;＆LT; TD合并单元格=2级=b＆GT;＆LT; / TD＆GT;＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;＆LT; TD colspan值= 2类=d的＆GT;＆下; / TD＆GT;＆下; / TR＆GT;＆下; TR类=emptyRow＆GT;＆下; TD列跨度=2类=一个＆GT;＆下; / TD＆GT; ＆LT; TD合并单元格=2级=b＆GT;＆LT; / TD＆GT;＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;＆LT; TD合并单元格=2级= d的＆GT;＆下; / TD＆GT;＆下; / TR＆GT;＆下; TR类=emptyRow＆GT;＆下; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;＆下; TD列跨度= 2级=b＆GT;＆LT; / TD＆GT;＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;＆LT; TD合并单元格=2级=D＆GT; ＆所述; / TD＆GT;＆下; / TR＆GT;＆下; TR类=emptyRow＆GT;＆下; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;＆下; TD列跨度=2类= b＆GT;＆LT; / TD＆GT;＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT; ＆所述; / TR＆GT;＆下; TR类=emptyRow＆GT;＆下; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;＆下; TD列跨度=2类=b的＆GT; ＆LT; / TD＆GT;＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT;＆LT; / TR＆GT; ＆所述; TR类=emptyRow＆GT;＆下; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;＆下; TD列跨度=2类=b的＆GT;＆下; / TD＆GT; ＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT; / TR＆GT;＆LT;＆LT TR类= emptyRow＆GT;＆下; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;＆下; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;＆下; TD列跨度= 2类=c的＆GT;＆下; / TD＆GT;＆下; TD列跨度=2类=d的＆GT;＆下; / TD＆GT;＆下; / TR＆GT;＆下; TR类=emptyRow＆GT; ＆所述; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;＆下; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;＆下; TD列跨度=2类= c的＆GT;＆下; / TD＆GT;＆下; TD列跨度=2类=d的＆GT;＆下; / TD＆GT;＆下; / TR＆GT;＆下; TR类=emptyRow＆GT;＆下; TD列跨度= 2类=一个＆GT;＆下; / TD＆GT;＆下; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;＆下; TD列跨度=2类=c的＆GT; ＆所述; / TD＆GT;＆下; TD列跨度=2类=d的＆GT;＆下; / TD＆GT;＆下; / TR＆GT;＆下; TR类=emptyRow＆GT;＆下; TD列跨度=2类= 一个＆GT;＆下; / TD＆GT;＆下; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;＆下; TD列跨度=2类=c的＆GT;＆下; / TD＆GT; ＆所述; TD列跨度=2类=d的＆GT;＆下; / TD＆GT;＆下; / TR＆GT;＆下; TR类=emptyRow＆GT;＆下; TD列跨度=2类=一个＆GT; ＆LT; / TD＆GT;＆LT; TD合并单元格=2级=b＆GT;＆LT; / TD＆GT;＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;＆LT; TD colspan值= 2类=d的＆GT;＆下; / TD＆GT;＆下; / TR＆GT;＆下; TR类=emptyRow＆GT;＆下; TD列跨度=2类=一个＆GT;＆下; / TD＆GT; ＆LT; TD合并单元格=2级=b＆GT;＆LT; / TD＆GT;＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;＆LT; TD合并单元格=2级= d的＆GT;＆下; / TD＆GT;＆下; / TR＆GT;＆下; TR类=emptyRow＆GT;＆下; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;＆下; TD列跨度= 2级=b＆GT;＆LT; / TD＆GT;＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;＆LT; TD合并单元格=2级=D＆GT; ＆所述; / TD＆GT;＆下; / TR＆GT;＆下; TR类=emptyRow＆GT;＆下; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;＆下; TD列跨度=2类= b＆GT;＆LT; / TD＆GT;＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT; ＆所述; / TR＆GT;＆下; TR类=emptyRow＆GT;＆下; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;＆下; TD列跨度=2类=b的＆GT; ＆LT; / TD＆GT;＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT;＆LT; / TR＆GT; ＆所述; TR类=emptyRow＆GT;＆下; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;＆下; TD列跨度=2类=b的＆GT;＆下; / TD＆GT; ＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT; / TR＆GT;＆LT;＆LT TR类= emptyRow＆GT;＆下; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;＆下; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;＆下; TD列跨度= 2级=C＆GT;＆LT; / TD＆GT;＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT;＆LT; / TR＆GT;＆LT; / TBODY＆GT;＆LT; /表＆gt; \r
解决方案
要这么做。最初对象的数组中的code形成错误的有序HTML元素。
（Сделалтак。Изначальносформировалмассивобъектов，таккакввашемкоденеправильносортированыHTML的элементы。）
\r
\r\r
\r $（函数（）{\r
变量$ tempScanner = $（'table.temp TR TD'）;\r
变种tempArry = [];\r
\r
$ tempScanner.each（功能（我，EL）{\r
变种D = {};\r
d.text = $（EL）的.text（）;\r
d.html = $（EL）的.html（）;\r
d.class = $（EL）.attr（类）;\r
tempArry.push（四）;\r
}）;\r
\r
功能compareObj（O1，O2）{\r
返回o1.text＆GT; o2.text;\r
}\r
\r
tempArry = tempArry.sort（compareObj）;\r
的console.log（tempArry）;\r
\r
对于（VAR I = 0; I＆LT; tempArry.length;我++）{\r
VAR tdClass = tempArry [I]的.class;\r
$（'＃tblGrid TD。+ tdClass +'：空：第一'）HTML（tempArry [I]的.html）。\r
}\r
\r
}）; \r
TD，\r
日{\r
边框：1px的固体＃111;\r
填充：6像素;\r
}\r
日{\r
字体重量：700;\r
}\r
span.pull右{\r
浮动：权利;\r
文本对齐：权利;\r
}\r
。一个，\r
。一个 {\r
背景色：#ACE;\r
}\r
.B，\r
.B {\r
背景色：#FAF;\r
}\r
。C，\r
。C {\r
背景色：#BAB;\r
}\r
.D，\r
.D {\r
背景色：#ECA;\r
}\r
.targetFound {\r
边界：2px的固体红;\r
} \r
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/jquery/1.11.1/jquery.min.js\"></script>\r
＆LT;表样式=显示：块;类=TEMP＆GT;\r
＆LT;＆TBODY GT;\r
＆所述; TR＆GT;\r
＆所述; TD列跨度=2数据ID =1数据-CATG =一个类=一个＆GT;噢噢＆下;跨度类=右拉＆GT; kr.8＆下; /跨度＆GT;\r
＆LT; / TD＆GT;\r
＆所述; TD列跨度=2数据ID =7数据-CATG =B级=b的＆GT; PPPP＆下;跨度类=右拉＆GT; kr.10＆下; /跨度＆GT;\r
＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2数据ID =12数据CATG =C级=C＆GT; KKKK＆LT;跨度类=右拉＆GT; kr.6＆LT; / SPAN＆GT;\r
＆LT; / TD＆GT;\r
＆所述; TD列跨度=2数据的id =2数据-CATG =一个类=一个＆GT; FFFF＆下;跨度类=右拉＆GT; kr.8＆下; /跨度＆GT;\r
＆LT; / TD＆GT;\r
＆所述; TD列跨度=2数据ID =4数据-CATG =B级=b的＆GT;咝＆下;跨度类=右拉＆GT; kr.10＆下; /跨度＆GT;\r
＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2数据ID =15数据CATG =C级=C＆GT; VVVV＆LT;跨度类=右拉＆GT; kr.6＆LT; / SPAN＆GT;\r
＆LT; / TD＆GT;\r
＆所述; TD列跨度=2数据ID =10数据-CATG =B级=b的＆GT;至三＆下;跨度类=右拉＆GT; kr.10＆下; /跨度＆GT;\r
＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2数据ID =21数据CATG =C级=C＆GT; LLLL＆LT;跨度类=右拉＆GT; kr.6＆LT; / SPAN＆GT;\r
＆LT; / TD＆GT;\r
＆所述; TD列跨度=2数据ID =22数据-CATG =一个类=一个＆GT;嗯＆下;跨度类=右拉＆GT; kr.9＆下; /跨度＆GT;\r
＆LT; / TD＆GT;\r
＆所述; TD列跨度=2数据ID =7数据-CATG =B级=b的＆GT; BBBB＆下;跨度类=右拉＆GT; kr.12＆下; /跨度＆GT;\r
＆LT; / TD＆GT;\r
＆所述; TD列跨度=2数据ID =8的数据CATG =B级=b的＆GT; EEEE＆下;跨度类=右拉＆GT; kr.8＆下; /跨度＆GT;\r
＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2数据ID =9数据CATG =C级=C＆GT; GGGG＆LT;跨度类=右拉＆GT; kr.6＆LT; / SPAN＆GT;\r
＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2数据ID =10数据CATG =C级=C＆GT; CCCC＆LT;跨度类=右拉＆GT; kr.6＆LT; / SPAN＆GT;\r
＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2数据ID =11数据CATG =C级=C＆GT; AAAA级＆LT;跨度类=右拉＆GT; kr.6＆LT; / SPAN＆GT;\r
＆LT; / TD＆GT;\r
＆所述; TD列跨度=2数据的id =6的数据CATG =B级=b的＆GT; NNNN＆下;跨度类=右拉＆GT; kr.10＆下; /跨度＆GT;\r
＆LT; / TD＆GT;\r
＆所述; TD列跨度=2数据ID =3数据-CATG =一个类=一个＆GT; ZZZZ＆下;跨度类=右拉＆GT; kr.8＆下; /跨度＆GT;\r
＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2数据ID =13数据CATG =C级=C＆GT;嗯＆LT;跨度类=右拉＆GT; kr.6＆LT; / SPAN＆GT;\r
＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2数据ID =14数据CATG =C级=C＆GT; RRRR＆LT;跨度类=右拉＆GT; kr.6＆LT; / SPAN＆GT;\r
＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2数据ID =17数据CATG =D级=D＆GT; HHHH＆LT;跨度类=右拉＆GT; kr.5＆LT; / SPAN＆GT;\r
＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2数据ID =18数据CATG =D级=D＆GT; UUUU＆LT;跨度类=右拉＆GT; kr.5＆LT; / SPAN＆GT;\r
＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2数据ID =19数据CATG =D级=D＆GT; QQQQ＆LT;跨度类=右拉＆GT; kr.5＆LT; / SPAN＆GT;\r
＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2数据ID =20数据CATG =D级=D＆GT; XXXX＆LT;跨度类=右拉＆GT; kr.5＆LT; / SPAN＆GT;\r
＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆LT; / TBODY＆GT;\r
＆LT; /表＆gt;\r
\r
＆LT;表ID =tblGrid＆GT;\r
＆LT;＆TBODY GT;\r
＆所述; TR＆GT;\r
百分位类=A合并单元格=2＆gt;将＆LT; /第i\r
百分位CLASS =B合并单元格=2＆GT; B＆LT; /第i\r
百分位类=C合并单元格=2＆GT; C＆LT; /第i\r
百分位类=D合并单元格=2＆GT; D＆LT; /第i\r
＆LT; / TR＆GT;\r
＆所述; TR类=emptyRow＆GT;\r
＆所述; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;\r
＆所述; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;\r
＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆所述; TR类=emptyRow＆GT;\r
＆所述; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;\r
＆所述; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;\r
＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆所述; TR类=emptyRow＆GT;\r
＆所述; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;\r
＆所述; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;\r
＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆所述; TR类=emptyRow＆GT;\r
＆所述; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;\r
＆所述; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;\r
＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆所述; TR类=emptyRow＆GT;\r
＆所述; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;\r
＆所述; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;\r
＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆所述; TR类=emptyRow＆GT;\r
＆所述; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;\r
＆所述; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;\r
＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆所述; TR类=emptyRow＆GT;\r
＆所述; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;\r
＆所述; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;\r
＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆所述; TR类=emptyRow＆GT;\r
＆所述; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;\r
＆所述; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;\r
＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆所述; TR类=emptyRow＆GT;\r
＆所述; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;\r
＆所述; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;\r
＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆所述; TR类=emptyRow＆GT;\r
＆所述; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;\r
＆所述; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;\r
＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆所述; TR类=emptyRow＆GT;\r
＆所述; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;\r
＆所述; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;\r
＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆所述; TR类=emptyRow＆GT;\r
＆所述; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;\r
＆所述; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;\r
＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆所述; TR类=emptyRow＆GT;\r
＆所述; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;\r
＆所述; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;\r
＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆所述; TR类=emptyRow＆GT;\r
＆所述; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;\r
＆所述; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;\r
＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆所述; TR类=emptyRow＆GT;\r
＆所述; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;\r
＆所述; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;\r
＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆所述; TR类=emptyRow＆GT;\r
＆所述; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;\r
＆所述; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;\r
＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆所述; TR类=emptyRow＆GT;\r
＆所述; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;\r
＆所述; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;\r
＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆所述; TR类=emptyRow＆GT;\r
＆所述; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;\r
＆所述; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;\r
＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆所述; TR类=emptyRow＆GT;\r
＆所述; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;\r
＆所述; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;\r
＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆所述; TR类=emptyRow＆GT;\r
＆所述; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;\r
＆所述; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;\r
＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆所述; TR类=emptyRow＆GT;\r
＆所述; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;\r
＆所述; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;\r
＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆所述; TR类=emptyRow＆GT;\r
＆所述; TD列跨度=2类=一个＆GT;＆下; / TD＆GT;\r
＆所述; TD列跨度=2类=b的＆GT;＆下; / TD＆GT;\r
＆LT; TD合并单元格=2级=C＆GT;＆LT; / TD＆GT;\r
＆LT; TD合并单元格=2级=D＆GT;＆LT; / TD＆GT;\r
＆LT; / TR＆GT;\r
＆LT; / TBODY＆GT;\r
＆LT; /表＆gt; \r
Please help me put the cells with a class that corresponds to the column header, in the appropriate column. The iteration should be done per column and then loop through the table.temp TD array and replace the first empty cell found with the first temp td found.
The end result should look similar to the table found here.
var $tempScanner = $('table.temp tr td');
var tempArry = [];
$tempScanner.each(function() {
tempArry.push($(this));
});
tempArry = tempArry.sort();
td,
th {
border: 1px solid #111;
padding: 6px;
}
th {
font-weight: 700;
}
span.pull-right {
float: right;
text-align: right;
}
.a,
.A {
background-color: #ACE;
}
.b,
.B {
background-color: #FAF;
}
.c,
.C {
background-color: #BAB;
}
.d,
.D {
background-color: #ECA;
}
.targetFound {
border: solid 2px red;
}
<table style="display:block;" class="temp"><tbody><tr><td colspan="2" data-id="1" data-catg="a" class="a">Ooo<span class="pull-right">kr.8</span></td><td colspan="2" data-id="7" data-catg="b" class="b">Pppp<span class="pull-right">kr.10</span></td><td colspan="2" data-id="12" data-catg="c" class="c">Kkkk<span class="pull-right">kr.6</span></td><td colspan="2" data-id="2" data-catg="a" class="a">Ffff<span class="pull-right">kr.8</span></td><td colspan="2" data-id="4" data-catg="b" class="b">Ssss<span class="pull-right">kr.10</span></td><td colspan="2" data-id="15" data-catg="c" class="c">Vvvv<span class="pull-right">kr.6</span></td><td colspan="2" data-id="5" data-catg="b" class="b">Iiii<span class="pull-right">kr.10</span></td><td colspan="2" data-id="21" data-catg="c" class="c">Llll<span class="pull-right">kr.6</span></td><td colspan="2" data-id="22" data-catg="a" class="a">Mmmm<span class="pull-right">kr.9</span></td><td colspan="2" data-id="7" data-catg="b" class="b">Bbbb<span class="pull-right">kr.12</span></td><td colspan="2" data-id="8" data-catg="b" class="b">Eeee<span class="pull-right">kr.8</span></td><td colspan="2" data-id="9" data-catg="c" class="c">Gggg<span class="pull-right">kr.6</span></td><td colspan="2" data-id="10" data-catg="c" class="c">Cccc<span class="pull-right">kr.6</span></td><td colspan="2" data-id="11" data-catg="c" class="c">Aaaa<span class="pull-right">kr.6</span></td><td colspan="2" data-id="6" data-catg="b" class="b">Nnnn<span class="pull-right">kr.10</span></td><td colspan="2" data-id="3" data-catg="a" class="a">Zzzz<span class="pull-right">kr.8</span></td><td colspan="2" data-id="13" data-catg="c" class="c">Mmmm<span class="pull-right">kr.6</span></td><td colspan="2" data-id="14" data-catg="c" class="c">Rrrr<span class="pull-right">kr.6</span></td><td colspan="2" data-id="17" data-catg="d" class="d">Hhhh<span class="pull-right">kr.5</span></td><td colspan="2" data-id="18" data-catg="d" class="d">Uuuu<span class="pull-right">kr.5</span></td><td colspan="2" data-id="19" data-catg="d" class="d">Qqqq<span class="pull-right">kr.5</span></td><td colspan="2" data-id="20" data-catg="d" class="d">Xxxx<span class="pull-right">kr.5</span></td></tr></tbody></table>
<table id="tblGrid">
<tbody><tr>
<th class="A" colspan="2">A</th>
<th class="B" colspan="2">B</th>
<th class="C" colspan="2">C</th>
<th class="D" colspan="2">D</th>
</tr>
<tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr><tr class="emptyRow"><td colspan="2" class="a"></td><td colspan="2" class="b"></td><td colspan="2" class="c"></td><td colspan="2" class="d"></td></tr></tbody></table>
解决方案
To do so. Initially an array of objects formed as wrongly sorted html-elements in your code.
(Сделал так. Изначально сформировал массив объектов, так как в вашем коде неправильно сортированы html-элементы.)
$(function() {
var $tempScanner = $('table.temp tr td');
var tempArry = [];
$tempScanner.each(function(i, el) {
var d = {};
d.text = $(el).text();
d.html = $(el).html();
d.class = $(el).attr('class');
tempArry.push(d);
});
function compareObj(o1, o2) {
return o1.text > o2.text;
}
tempArry = tempArry.sort(compareObj);
console.log(tempArry);
for (var i = 0; i < tempArry.length; i++) {
var tdClass = tempArry[i].class;
$('#tblGrid td.' + tdClass + ':empty:first').html(tempArry[i].html);
}
});
td,
th {
border: 1px solid #111;
padding: 6px;
}
th {
font-weight: 700;
}
span.pull-right {
float: right;
text-align: right;
}
.a,
.A {
background-color: #ACE;
}
.b,
.B {
background-color: #FAF;
}
.c,
.C {
background-color: #BAB;
}
.d,
.D {
background-color: #ECA;
}
.targetFound {
border: solid 2px red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table style="display:block;" class="temp">
<tbody>
<tr>
<td colspan="2" data-id="1" data-catg="a" class="a">Ooo<span class="pull-right">kr.8</span>
</td>
<td colspan="2" data-id="7" data-catg="b" class="b">Pppp<span class="pull-right">kr.10</span>
</td>
<td colspan="2" data-id="12" data-catg="c" class="c">Kkkk<span class="pull-right">kr.6</span>
</td>
<td colspan="2" data-id="2" data-catg="a" class="a">Ffff<span class="pull-right">kr.8</span>
</td>
<td colspan="2" data-id="4" data-catg="b" class="b">Ssss<span class="pull-right">kr.10</span>
</td>
<td colspan="2" data-id="15" data-catg="c" class="c">Vvvv<span class="pull-right">kr.6</span>
</td>
<td colspan="2" data-id="5" data-catg="b" class="b">Iiii<span class="pull-right">kr.10</span>
</td>
<td colspan="2" data-id="21" data-catg="c" class="c">Llll<span class="pull-right">kr.6</span>
</td>
<td colspan="2" data-id="22" data-catg="a" class="a">Mmmm<span class="pull-right">kr.9</span>
</td>
<td colspan="2" data-id="7" data-catg="b" class="b">Bbbb<span class="pull-right">kr.12</span>
</td>
<td colspan="2" data-id="8" data-catg="b" class="b">Eeee<span class="pull-right">kr.8</span>
</td>
<td colspan="2" data-id="9" data-catg="c" class="c">Gggg<span class="pull-right">kr.6</span>
</td>
<td colspan="2" data-id="10" data-catg="c" class="c">Cccc<span class="pull-right">kr.6</span>
</td>
<td colspan="2" data-id="11" data-catg="c" class="c">Aaaa<span class="pull-right">kr.6</span>
</td>
<td colspan="2" data-id="6" data-catg="b" class="b">Nnnn<span class="pull-right">kr.10</span>
</td>
<td colspan="2" data-id="3" data-catg="a" class="a">Zzzz<span class="pull-right">kr.8</span>
</td>
<td colspan="2" data-id="13" data-catg="c" class="c">Mmmm<span class="pull-right">kr.6</span>
</td>
<td colspan="2" data-id="14" data-catg="c" class="c">Rrrr<span class="pull-right">kr.6</span>
</td>
<td colspan="2" data-id="17" data-catg="d" class="d">Hhhh<span class="pull-right">kr.5</span>
</td>
<td colspan="2" data-id="18" data-catg="d" class="d">Uuuu<span class="pull-right">kr.5</span>
</td>
<td colspan="2" data-id="19" data-catg="d" class="d">Qqqq<span class="pull-right">kr.5</span>
</td>
<td colspan="2" data-id="20" data-catg="d" class="d">Xxxx<span class="pull-right">kr.5</span>
</td>
</tr>
</tbody>
</table>
<table id="tblGrid">
<tbody>
<tr>
<th class="A" colspan="2">A</th>
<th class="B" colspan="2">B</th>
<th class="C" colspan="2">C</th>
<th class="D" colspan="2">D</th>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
<tr class="emptyRow">
<td colspan="2" class="a"></td>
<td colspan="2" class="b"></td>
<td colspan="2" class="c"></td>
<td colspan="2" class="d"></td>
</tr>
</tbody>
</table>
这篇关于转阵的阵成列的jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
