我正在尝试构建一个能够减轻项目手动方面的功能。客户端在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>
答案 0 :(得分：1)
这是一个最简单的示例，其中包含一个更简单的表，该表创建一个对象，该对象包含与 x 标识的列标题相对应的属性，其值为相应行标题的数组。我在那里留下了一些日志记录行，这样您就可以看到代码发生了什么，因为它为每个 x 计算出行和列标题值：
var lists = {};
buildLists();
console.log(JSON.stringify(lists, null, 2));
function buildLists() {
$('#data tbody tr td').each(function() {
var columnIndex = $(this).parent().children().index($(this));
var rowIndex = $(this).parent().parent().children().index($(this).parent());
if ($(this).html() == 'x') {
var columnHeader = getTableCellValue('data', 0, columnIndex);
var rowHeader = getTableCellValue('data', rowIndex, 0);
//console.log('hit at ' + rowIndex + ' ' + columnIndex);
//console.log(getTableCellValue('data', rowIndex, columnIndex));
//console.log(columnHeader + ' : ' + rowHeader);
if (!lists[columnHeader]) {
lists[columnHeader] = [];
}
lists[columnHeader].push(rowHeader);
};
});
};
function getTableCellValue(tableId, rowIndex, columnIndex) {
var cell = $('#' + tableId + ' tr').eq(rowIndex).find('td').eq(columnIndex)
return cell.text();
}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>
<body>
<table id="data">
<tbody>
<tr>
<td></td>
<td>foo</td>
<td>bar</td>
<td>baz</td>
</tr>
<tr>
<td>A</td>
<td>x</td>
<td></td>
<td></td>
</tr>
<tr>
<td>B</td>
<td>x</td>
<td></td>
<td>x</td>
</tr>
<tr>
<td>C</td>
<td></td>
<td>x</td>
<td>x</td>
</tr>
</tbody>
</table>
</body>
使用你的表（我给了id="data"），它仍然可以工作，但我认为你需要稍微调整解决方案，以使你的对象属性名称更简洁：
var lists = {};
buildLists();
console.log(JSON.stringify(lists, null, 2));
function buildLists() {
$('#data tbody tr td').each(function() {
var columnIndex = $(this).parent().children().index($(this));
var rowIndex = $(this).parent().parent().children().index($(this).parent());
if ($(this).html() == 'x') {
var columnHeader = getTableCellValue('data', 0, columnIndex);
var rowHeader = getTableCellValue('data', rowIndex, 0);
//console.log('hit at ' + rowIndex + ' ' + columnIndex);
//console.log(getTableCellValue('data', rowIndex, columnIndex));
//console.log(columnHeader + ' : ' + rowHeader);
if (!lists[columnHeader]) {
lists[columnHeader] = [];
}
lists[columnHeader].push(rowHeader);
};
});
};
function getTableCellValue(tableId, rowIndex, columnIndex) {
var cell = $('#' + tableId + ' tr').eq(rowIndex).find('td').eq(columnIndex)
return cell.text();
}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>
<body>
<table id="data">
<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>
</body>