在 HTML Table 集合中查找并删除直到某个值的行索引的行

Question

我有一个月度 html 日历 table 是这样的：

<table id="a">
  <tr><td>31</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
  <tr><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td></tr>
  <tr><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td></tr>
  <tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td></tr>
  <tr><td>28</td><td>29</td><td>30</td><td>31</td><td>1</td><td>2</td><td>3</td></tr>
</table>

我需要一个实用的解决方案来删除从底部到“7”的行，基本上只保留第一周。我的做法是把collection转成数组，在live上找到deleterow(-1)到运行个数的rowindex table.

const ta = [...document.querySelectorAll('table#a>*>tr')]
  .map(row => [...row.querySelectorAll('td,th')]
  .map(cell => cell.innerText) );

输出一个多维数组，然后可以循环...

for (let i = 0; i < ta.length; i++) {
  if(ta[i].some(e => e === '7')) console.log(ta.length-i);
};

// 4

但是链接 .some(e => e === '7') 总是 returns false。我希望添加类似 .some(function (elem, i) {return elem === '7' && ~(index = i); 的内容以获取找到它的行的索引。

是否有功能齐全的方法来完成此操作？

Answer 1

ta.find(row=>row.some(e=>e==="7")) 将为您提供包含“7”的实际子数组，ta.indexOf(...) 将为您提供其在外部数组中的索引：

const ta = [...document.querySelectorAll('table#a tr')]
  .map(row => [...row.children].map(cell => cell.textContent) );
  
let index = ta.indexOf(ta.find(row=>row.some(e=>e==="7")));

console.log(index)

<table id="a">
  <tr><td>31</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
  <tr><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td></tr>
  <tr><td>14</td><td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td></tr>
  <tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td></tr>
  <tr><td>28</td><td>29</td><td>30</td><td>31</td><td>1</td><td>2</td><td>3</td></tr>
</table>

在 HTML Table 集合中查找并删除直到某个值的行索引的行

Find and delete rows up to rowindex of a value in an HTML Table Collection

javascript

functional-programming

multidimensional-array