3
Я пытаюсь создать функцию, которая облегчит некоторые аспекты вручную для проекта. Клиент предоставил мне список в Excel, который я преобразовал в таблицу (благодаря Notepad ++ и некоторому отличному сценарию jQuery).jQuery итерация столбца таблицы и строк для построения списков
Моя цель состоит в том, чтобы сделать отдельных списков всех столбцов каждый из которых состоят из заголовка столбца, и «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++) {
\t $('tr').each(function() {
\t \t var rowIterated = [];
\t \t var columnHeader = $('tr:eq(0)').find($('td').eq(i)).text();
\t \t var xTD = $(this).find($('td').eq(i)).not($('td.nonX'));
\t \t rowIterated.push(columnHeader);
\t \t rowIterated.push(xTD);
\t \t corespondingTD.push(rowIterated);
\t });
}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>
что вам очень нужно для этого. Это позволило мне сделать именно то, что мне было нужно. Вы были правы в том, что заголовки столбцов слишком многословны. Как я динамически итерации через объект JSON, который не является равномерно построенным? –