ОБНОВЛЕНИЕ УСПЕХА / РЕЗУЛЬТАТОВ , чтобы поделиться своими советами:
У меня есть таблица
<table>
<tr>
<td><span>1</span></td>
<td><span id="span2">2</span></td>
<td><span>3</span></td>
<td><span>4</span></td>
</tr>
<tr>
<td><span>5</span></td>
<td><span>6</span></td>
<td><span>7</span></td>
<td><span>8</span></td>
</tr>
</table>
, и, используя предыдущие ответы, я написал этот небольшой скрипт, который начало простого механизма выбора.
const ltrim = (haystack, needle) => {
var regex = new RegExp('^'+needle);
return haystack.replace(regex, '');
}
const rtrim = (haystack, needle) => {
var regex = new RegExp(needle+'$');
return haystack.replace(regex, '');
}
const $ = (s) => {
var el = document;
if (!s.match(/:eq/g)) {
var cut_index = Math.max(s.lastIndexOf('>'),s.lastIndexOf(' '))+1;
var last = s.substring(cut_index);
if (/#/.test(last)) el = el.querySelector(s);
else el = el.querySelectorAll(s);
}
else {
var m = s.match(/:eq\(\d+\)/g);
var p = s.split(/:eq\(\d+\)/g);
for (i in p) {
if (p[i] == '') i++;
else {
if (i == p.length-1) {
if (p[i].match(/#/)) el = el.querySelector(p[i]);
else el = el.querySelectorAll(p[i]);
}
else el = el.querySelectorAll(p[i])[m[i].match(/\d+/g)];
}
}
}
return el;
}
Теперь я могу перебирать таблицу, используя jquery -подобный синтаксис селектора с
alert($('table tr td span#span2').innerHTML); // 2
alert($('table tr:eq(1) td:eq(1) span:eq(0)').innerHTML); // 6
alert($('table tr:eq(1) td:eq(2) span')[0].innerHTML); // 7
, и я счастлив на данный момент. Это выражение, например
$('table tr:eq(1) td span').forEach(elem => {elem.classList.add('yellow')});
, использует обычный синтаксис JS, чтобы выделить полную строку или только одну ячейку:
$('table tr:eq(1) td span:eq(2)').classList.add('yellow');
Я не уверен насчет поддержки других jquery -подобных css селекторов, увидим в будущем. В случае улучшений дальнейшие обновления будут здесь.