Javascript Tabelle td Index

Question

ich diesen Code verwenden, den Index eines td in einer Tabelle zu erhalten:

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

Das Problem besteht darin, dass jeder Index der Zeile beginnt wieder bei 0; Zum Beispiel ist der Index der ersten Zelle der ersten Zeile 0. Ebenso ist der Index der ersten Zelle in der zweiten Zeile ebenfalls 0 und so weiter. Ich möchte nicht, dass der Index für jede Zeile in einer Tabelle auf 0 zurückgesetzt wird. Ich möchte, dass die Indexnummer dort fortgesetzt wird, wo sie in der letzten Zelle der vorherigen Zeile aufgehört hat.

Answer 1

Fragen Sie Ihre Zelle nach der Elternzeile, dann erhalten Sie die rowIndex.

var rowIndex = e.target.parentElement.rowIndex; 

Der obige Code wird davon ausgegangen, dass e Ihre Veranstaltung und target ist Ihre Zelle. Ihr (e || event)-Code ist nicht wirklich erforderlich, da Sie entscheiden, wie Ihr Ereignisobjekt benannt wird, basierend darauf, wie Sie Ihren Ereignishandler deklarieren.

Answer 2

Sie müssen die Eigenschaft rowIndex berücksichtigen, um eine eindeutige Nummer für die Zelle zu erhalten.

Im Idealfall jede Zelle in JS als einzigartiges Paar (rowIndex,cellIndex)

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

Note definiert ist, dass Sie eine beliebige Anzahl an Stelle von 1000 verwenden können, es sollte nur größer sein als die maximale Anzahl der Spalten in der

Tisch

Answer 3

So etwas kann den Trick tun und wird auch funktionieren, wenn die Anzahl der Zellen in jeder Zeile ist nicht das gleiche:

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>