【发布时间】：2017-04-03 00:23:06
【问题描述】：
我正在尝试构建一个可以减轻项目手动方面的功能。客户在 Excel 中为我提供了一个列表，我已将其转换为表格（感谢 Notepad++ 和一些漂亮的 jQuery 脚本）。
我的目标是制作所有列的单独列表，每个列都由列标题和 “X” 单元格组成，但是"X" 单元格中的文本将与每行的第一个 <td> 匹配。
我尝试过但失败了，所以我希望有人能看到我的目标并指出我的缺陷。
我采取的方法是将所有内容放入一个方向整齐的数组中，然后我将遍历该数组以创建 <div><ul><li>Column Header</li><li>text from first Row (X replaced)</li> etc...</ul></div>
我怀疑我的行迭代和列迭代是倒退的，但我们将不胜感激。
This StackOverflow post 有我需要的要点，但没有我想要的那么全面。
$('td').each(function() {
var currentHTML = $(this).html().toString();
if (currentHTML === " ") {
$(this).text("").addClass('nonX');
}
});
var columnIteration = $('tr:eq(0)').find('td').length;
console.log(columnIteration);
var corespondingTD = [];
for (i = 1, z = columnIteration; i < z; i++) {
$('tr').each(function() {
var rowIterated = [];
var columnHeader = $('tr:eq(0)').find($('td').eq(i)).text();
var xTD = $(this).find($('td').eq(i)).not($('td.nonX'));
rowIterated.push(columnHeader);
rowIterated.push(xTD);
corespondingTD.push(rowIterated);
});
}table {
border: solid 1px #000;
border-collapse: collapse;
}
td {
border: solid 1px #000;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td></td>
<td>WILLOW ADD-ON
<span style="mso-spacerun:yes"> </span>$6.99</td>
<td>TV ASIA<span style="mso-spacerun:yes"> </span>$9.99</td>
<td>ZEE TV & STAR INDIA PLUS 2-Pack<span style="mso-spacerun:yes">
</span>$14.99</td>
<td>SET ASIA & STAR INDIA PLUS 2-Pack<span style="mso-spacerun:yes">
</span>$14.99</td>
<td>Hindi 4-Pack
<span style="mso-spacerun:yes"> </span>$24.99</td>
<td>Hindi 4-Pack
<span style="mso-spacerun:yes"> </span>$24.99</td>
<td>Hindi 4-Pack
<span style="mso-spacerun:yes"> </span>$24.99</td>
<td>Desi 4-Pack<span style="mso-spacerun:yes"> </span>$29.99</td>
<td>Hindi 8-Pack
<span style="mso-spacerun:yes"> </span>$34.99</td>
<td>Desi Mega Pack: SET, TV Asia, Zee, Star Plus, Life OK, ABP News, Star Gold
<br> $42.99
</td>
<td>Hindi 12-Pack
<span style="mso-spacerun:yes"> </span>$44.99</td>
<td>Tamil 2-Pack
<span style="mso-spacerun:yes"> </span>$14.99</td>
<td>Punjabi 2-Pack
<span style="mso-spacerun:yes"> </span>$14.99</td>
</tr>
<tr>
<td>ABP NEWS</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>AAPKA COLORS</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td>x</td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>EROS NOW: VIDEO ON DEMAND <font class="font5">($9.99/mo. Add-On)</font></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>LIFE OK</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td>x</td>
<td> </td>
<td>x</td>
<td>x</td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>NDTV 24x7</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>NDTV GOOD TIMES
</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>SAB</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>SONY MIX</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>STAR INDIA PLUS
<span style="mso-spacerun:yes"> </span></td>
<td> </td>
<td> </td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>STAR INDIA GOLD
</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
<td>x</td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>SET ASIA</td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td>x</td>
<td> </td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>TV ASIA</td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td>x</td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ZEE BOLLYWOOD</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>ZEE TV</td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>WILLOW</td>
<td>x</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>VIJAY</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
</tr>
<tr>
<td>SUN TV</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
<td> </td>
</tr>
<tr>
<td>JUS PUNJABI</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
</tr>
<tr>
<td>TV84</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>x</td>
</tr>
<!--EndFragment-->
</tbody>
</table>【问题讨论】：
标签： javascript jquery html css html-table