JavascriptのテーブルTDのインデックス

Question

私はテーブル内のTDのインデックスを取得するには、このコードを使用します。

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

問題は、各行のインデックスは0で再び開始することです。 たとえば、最初の行の最初のセルのインデックスは0です。同様に、2番目の行の最初のセルのインデックスも0などです。テーブルの各行に対してインデックスを0にリセットしたくありません。前の行の最後のセルで中断したところでインデックス番号を続行します。

Answer 1

セルに親列があることを確認してからrowIndexを取得します。

var rowIndex = e.target.parentElement.rowIndex; 

上記のコードはeがあなたのイベントであり、targetがあなたの細胞であることを前提としています。 (e || event)コードは、イベントハンドラの宣言方法に基づいてイベントオブジェクトの名前を決定するので、実際には必要ありません。

Answer 2

rowIndexプロパティを使用して、それぞれのセルの一意の番号を取得する必要があります。理想的には、各セルは、あなたがそれはちょうど中の列数の最大値より大きくなければならない代わりに、1000の任意の番号を使用することができます（rowIndex,cellIndex）

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

ノートのユニークなペアとしてJSに定義されている

テーブル

Answer 3

このような何かトリックを行うことがあり、細胞の数は、すべての行で同じでない場合であっても動作します：

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));

<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>