Dev Faq
8
votes

Obtenez l'emplacement des cellules

J'ai donc cette table, et quand je clique sur un td code> J'aimerais savoir où est-ce (quelle ligne et quelle cellule) sans aucun attributs sur les éléments. 

// Track onclicks on all td elements

var table = document.getElementsByTagName("table")[0];
var cells = table.getElementsByTagName("td"); // 

for(var i = 1; i < cells.length; i++){
    // Cell Object
    var cell = cells[i];
    // Track with onclick
    cell.onclick = function(){
        // Track my location;
        // example: I'm in table row 1 and I'm the 2th cell of this row
    }
}

4 commentaires

JQuery a l'utile $. Index () méthode qui peut faire cela Pour vous si vous êtes ouvert aux cadres.

Je ne veux pas utiliser de cadres, mais je vais essayer de regarder ce que cette fonction fait à JQuery.

Vous pouvez voir un exemple en utilisant $. Index () en ligne sur http://jsbin.com/ okuri4 mais @patrickdw La réponse de ce qui suit ci-dessous semble être meilleure pour vous.

Cela pourrait aider: Stackoverflow.com/questions/ 661726 / How-to-Get-A-Cells-Locati sur

4 Réponses :

1
votes

Eh bien, lorsque vous avez des rangées / colspan, vous pouvez vous amuser beaucoup plus, si la grille est régulière, vous pouvez simplement déterminer votre position à partir de l'index en faisant: 

row = Math.floor(i / rows); 
column = i % columns;

1 commentaires

Ce n'est pas régulier :) J'aimerais aussi utiliser des rangements de rangs et colspan, mais merci pour le conseil :))

21
votes

dans le gestionnaire, ceci est la cellule du tableau, de sorte que l'index de cellule le faire: xxx

et pour l'indice de ligne, faites ceci: xxx

Exemple: http: // jsfiddle.net/fwztc/1/

0 commentaires
3
votes

Ce bloc de script vous fournira les informations que vous désirez, en ajoutant les informations comme propriétés à la cellule, puis en leur accédant dans la fonction onclick code>: 

// Track onclicks on all td elements
var table = document.getElementsByTagName("table")[0];
// Get all the rows in the table
var rows = table.getElementsByTagName("tr");

for (var i = 0; i < rows.length; i++) {
    //Get the cells in the given row
    var cells = rows[i].getElementsByTagName("td");
    for (var j = 0; j < cells.length; j++) {
        // Cell Object
        var cell = cells[j];
        cell.rowIndex = i;
        cell.positionIndex = j;
        cell.totalCells = cells.length;
        cell.totalRows = rows.length;
        // Track with onclick
        console.log(cell);
        cell.onclick = function () {
            alert("I am in row " + this.rowIndex + " (out of " + this.totalRows + " rows) and I am position " + this.positionIndex + " (out of " + this.totalCells + " cells)");
        };
    }
}

0 commentaires
0
votes

à l'aide de "ceci" sur la table des cellules b>

p> 

<table>
    <tbody>
        <tr>
            <td onclick="myFunction(this)">1</td>
            <td onclick="myFunction(this)">2</td>
            <td onclick="myFunction(this)">3</td>
        </tr>

        <tr>
            <td onclick="myFunction(this)">4</td>
            <td onclick="myFunction(this)">5</td>
            <td onclick="myFunction(this)">6</td>
        </tr>

        <tr>
            <td onclick="myFunction(this)">7</td>
            <td onclick="myFunction(this)">8</td>
            <td onclick="myFunction(this)">9</td>
        </tr>
    </tbody>
</table>

<p id="tr"></p>
<p id="td"></p>

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO