Question

我使用此代码获取表中td的索引：

  var tdIndex = this || (e || event).target;
  var index = tdIndex.cellIndex;

问题是每行的索引再次从0开始; 例如，第一行的第一个单元的索引是0.类似地，第二行中的第一个单元的索引也是0，依此类推。我不希望索引在表中的每一行重置为0。我希望索引号在上一行的最后一个单元格中从中断处继续。

Answer 1

询问您的单元格的父行，然后获取rowIndex。

var rowIndex = e.target.parentElement.rowIndex;

上述代码假设e是您的活动，而target是您的手机。您的(e || event)代码并不是必需的，因为您根据声明事件处理程序的方式决定了您的事件对象的名称。

Answer 2

您需要考虑rowIndex属性，以获取每个单元格的唯一编号。

理想情况下，每个单元格在JS中定义为唯一的一对（rowIndex,cellIndex）

var tdIndex = this || (e || event).target;
var index = tdIndex.cellIndex + 1000 * tdIndex.rowIndex;

请注意，您可以使用任意数字而不是1000.它应该大于表格中的最大列数

Answer 3

这样的事情可能会起作用，即使每一行的细胞数量不同，它也会起作用：

＆＃13;

const table = document.querySelector('#table__base');
const cellOne = document.querySelector('#cellOne');
const cellTwo = document.querySelector('#cellTwo');

function getIndex(table, cell) {
  let counter = 0;

  for (let i = 0, len = cell.parentNode.rowIndex; i <= len; i += 1) {
    let numberOfCellsInThisRow = (i === cell.parentNode.rowIndex) ? cell.cellIndex : table.rows[i].cells.length;
    counter += numberOfCellsInThisRow;
  }
  return counter;
}

console.log(getIndex(table, cellOne));
console.log(getIndex(table, cellTwo));

＆＃13;

<table id="table__base">
  <tr>
    <td>0</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td id="cellOne">9</td>
    <td>10</td>
    <td>11</td>
  </tr>
  <tr>
    <td>12</td>
    <td>13</td>
    <td id="cellTwo">14</td>
    <td>15</td>
    <td>16</td>
    <td>17</td>
  </tr>
</table>

＆＃13;

Javascript表td的索引

3 个答案: