Dev Faq
0
votes

comment appliquer onclick sur une cellule spécifique d'un tableau plutôt que sur un tableau entier?

En fait, j'utilise une fonction selon laquelle toute cellule d'un tableau sur laquelle je clique donne son index de ligne mais je ne le veux pas. Je veux que si je clique sur les cellules de la dernière colonne seulement, cela donne l'index de ligne de cette cellule, mais seules les cellules de la dernière colonne doivent avoir cette fonctionnalité et non les autres 

var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
    e = e || window.event;
    var data = [];
    var target = e.srcElement || e.target;
    while (target && target.nodeName !== "TR") {
        target = target.parentNode;
    }
    if (target) {
        var cells = target.getElementsByTagName("td");
        for (var i = 0; i < cells.length; i++) {
            data.push(cells[i].innerHTML);
        }
    }
    alert(data);
};

En utilisant cette fonction, je clique sur n'importe quelle cellule, il rend l'index de ligne Ceci est le code de ma table 

$(document).ready(function() {

            var trHTML = "";

            $.ajax({
                url: '../php/admin/schedule_match.php',
                type: 'post',
                data: {},
                success: function(response) {

                    var data = $.parseJSON(response);
                    var table;
                    //table.clear();
                     table = $('#tbl').DataTable(); 
                     table.clear();
                     if(data!='') {               
                      $.each(data, function(i, item) {
                         table.row.add([ data[i].name, data[i].provider,data[i].auth,data[i].mid,data[i].mode,'<img width="100px" height= "70px" src=' + data[i].p1 + '>','<img width="100px" height= "70px" src=' + data[i].p2 + '>','<img width="100px" height= "70px" src=' + data[i].p3 + '>','<img width="100px" height= "70px" src=' + data[i].p4 + '>','<img width="100px" height= "70px" src=' + data[i].p5 + '>','<img width="100px" height= "70px" src=' + data[i].p6 + '>',data[i].time,'<button class="btn btn-primary delete" data-id-id=' + data[i].id + '>Delete</button>','<button class="btn btn-primary schedule" data-id-id=' + data[i].id + '>Schedule</button>']);
                     });
                         table.draw();

                }
            }
        })
        });

<table id="tbl" class="table table-bordered table-dark">
                <thead>
                    <tr>

                      <th scope="col">Name</th>
                        <th scope="col">Auth Provider</th>
                        <th scope="col">Auth Unique Id</th>
                        <th scope="col">Match Id</th>
                        <th scope="col">Game Mode</th>
                        <th scope="col">Character 1</th>
                        <th scope="col">Character 2</th>
                        <th scope="col">Character 3</th>
                        <th scope="col">Character 4</th>
                        <th scope="col">Character 5</th>
                        <th scope="col">Character 6</th>
                        <th scope="col">Match Time</th>
                        <th scope="col">Action</th>
                        <th scope="col">Schedule Match</th>
                    </tr>
                </thead>

        <tbody>
        </tbody>

            </table>

Maintenant, c'est le code chaque fois que je clique sur une ligne, il renvoie toutes les données de cette ligne 

    $('#tbl tbody').on( 'click', 'td', function () {
             var row = $(this).parent().parent().children().index($(this).parent());
  alert(row);
        });

Je ne veux que la dernière cellule cliquable de la ligne que lorsque je clique sur le dernier, je renvoie les données de cette ligne à l'exception des deux dernières cellules de cette ligne

5 commentaires

Pouvez-vous partager votre code pour

?

@VermaJr. j'ai partagé du code

Vérifiez si cela vous aide - stackoverflow.com/ questions / 40298501 /…

Vous mélangez des API JavaScript natives avec jQuery, n'utilisez pas jQuery.

Voir la dernière partie du code et lire la description ... pouvez-vous m'aider avec ça?

4 Réponses :

0
votes

Cela devrait faire ce que vous voulez: 

var table = document.getElementsByTagName("table")[0];
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) {
    e = e || window.event;
    var data = [];
    var target = e.srcElement || e.target;
    if (target.closest('td').matches(':last-child')) {
        var tr = target.closest('tr');
        if (tr) {
            var cells = tr.getElementsByTagName("td");
            for (var i = 0; i < cells.length; i++) {
                if (!cells[i].matches(':last-child')) {
                    data.push(cells[i].innerHTML);
                }
            }
        }
        alert(data);
    }
};

pour obtenir les données de chaque cellule sans dernière utilisation: 

var data = $this.siblings().map(function() {
    return this.innerHTML;
}).get();

EDIT: p>

voici la solution native: 

$('#tbl tbody').on( 'click', 'td', function () {
   var $this = $(this);
   if ($this.is(':last-child')) {
      var row = $this.parent().index(); // this is the same as your code that get the row

      alert(row);
   }
});

Voici le support du navigateur pour les correspondances https://caniuse.com/#feat=matchesselector

1 commentaires

Les commentaires ne sont pas destinés à une discussion approfondie; cette conversation a été déplacé vers le chat .

0
votes

Il suffit d'obtenir le nombre de lignes présentes dans

en utilisant length et de le comparer avec l'index de la ligne cliquée. 
$('#tbl tbody').on( 'click', 'td', function () {
    var row = $(this).parent().parent().children().index($(this).parent());
    var num_rows = $(this).parent().parent().children().length;
    if(row == (num_rows - 1))
        alert(row);
});

0 commentaires
0
votes

Le code suivant fonctionne comme vous l'avez demandé: 

$('#tbl tbody').on( 'click', 'td:last-child', function (e) {
  var row = $(this).parent().parent().children().index($(this).parent());

  var data = [];
  var target = e.srcElement || e.target;
    while (target && target.nodeName !== "TR") {
        target = target.parentNode;
    }
    if (target) {
        var cells = target.getElementsByTagName("td");
        for (var i = 0; i < cells.length-2; i++) {
            data.push(cells[i].innerHTML);
        }
    }
    alert(row)
    alert(data);
});

JSFiddle exemple peut être vu ici.

Si le dernier bit de votre code fonctionne pour vous, vous pouvez modifier la boucle for suivante dans votre code: 

for (var i = 0; i < cells.length-2; i++) {

en 

for (var i = 0; i < cells.length; i++) {

et il devrait vous donner les données de la ligne à l'exception des deux dernières colonnes. 

$('#tbl tbody').on( 'click', 'td:last-child', function () {
  var row = $(this).parent().parent().children().index($(this).parent());
  alert(row);
});

JSFiddle pour le code mis à jour

6 commentaires

J'ai mis à jour mon code, peux-tu voir à nouveau la dernière partie avec bonté

J'ai mis à jour ma réponse pour résoudre votre dernière partie de code.

je veux plutôt cliquer n'importe où dans la ligne pour obtenir les données de cette ligne, je ne dois cliquer que sur la dernière cellule pour obtenir les données de cette ligne

Mise à jour de mon code, qui alertera la ligne et les données de toutes les cellules à l'exception des deux dernières cellules.

Heureux de vous aider, si cette réponse a résolu votre problème, veuillez la marquer comme acceptée en cliquant sur la coche à côté de la réponse. voir: Comment l'acceptation d'une réponse fonctionne-t-elle? pour plus d'informations

continuons cette discussion dans le chat .

0
votes 
document.querySelector('#tableId').addEventListener('click', function(){test(event)}, false);

function test()
{
 let col = window.event.target.cellIndex;
 let row = window.event.target.parentNode.rowIndex;
 let table=document.querySelector('table');



let tablelength =table.rows.length - 1 ;

if( row == tablelength ){
alert("row" + row + 
   " -column" + col );
 }


}
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