在 HTML 表格集合中查找和删除直到行索引的行

Question

我有一个像这样的每月 html 日历表：

<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”的行，基本上只留下第一周。我的方法是将集合转换为数组，找到导致deleterow(-1) 的数量在活动表上运行的行索引。

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') 总是返回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>