web-dev-qa-db-fra.com

Comment obtenir la valeur html table td cell par JavaScript?

J'ai un tableau HTML créé avec des données dynamiques et je ne peux pas prédire le nombre de lignes qu'il contient. Ce que je veux faire, c'est obtenir la valeur d'une cellule lorsque l'utilisateur clique sur une ligne. Je sais utiliser td onclick mais je ne sais pas comment accéder à la valeur de la cellule dans la fonction Javascript.

La valeur de la cellule est en réalité l'index d'un enregistrement et elle est masquée dans la table. Une fois la clé d’enregistrement localisée, je peux récupérer l’enregistrement complet à partir de db.

Comment obtenir la valeur de la cellule si je ne connais pas l'index de ligne et l'index de colonne de la table sur laquelle j'ai cliqué?

javascripthtml-tablecell
12
user661684

N'utilisez pas de JavaScript en ligne, séparez votre comportement de vos données et cela devient beaucoup plus facile à gérer. Je suggère ce qui suit:

var table = document.getElementById('tableID'),
    cells = table.getElementsByTagName('td');

for (var i=0,len=cells.length; i<len; i++){
    cells[i].onclick = function(){
        console.log(this.innerHTML);
        /* if you know it's going to be numeric:
        console.log(parseInt(this.innerHTML),10);
        */
    }
}


var table = document.getElementById('tableID'),
  cells = table.getElementsByTagName('td');

for (var i = 0, len = cells.length; i < len; i++) {
  cells[i].onclick = function() {
    console.log(this.innerHTML);
  };
}
th,
td {
  border: 1px solid #000;
  padding: 0.2em 0.3em 0.1em 0.3em;
}
<table id="tableID">
  <thead>
    <tr>
      <th>Column heading 1</th>
      <th>Column heading 2</th>
      <th>Column heading 3</th>
      <th>Column heading 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>43</td>
      <td>23</td>
      <td>89</td>
      <td>5</td>
    </tr>
    <tr>
      <td>4</td>
      <td>3</td>
      <td>0</td>
      <td>98</td>
    </tr>
    <tr>
      <td>10</td>
      <td>32</td>
      <td>7</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

JS Fiddle preuve de concept .

Une approche révisée, en réponse au commentaire ( ci-dessous ):

Vous manquez un point-virgule. Aussi, ne faites pas de fonctions dans une boucle.

Cette révision lie une fonction (unique) nommée en tant que gestionnaire d'événements click des multiples éléments <td> et évite la surcharge inutile liée à la création de plusieurs fonctions anonymes dans une boucle (ce qui est une pratique peu pratique en raison de la répétition et de la performance, en raison de utilisation de la mémoire):

function logText() {
  // 'this' is automatically passed to the named
  // function via the use of addEventListener()
  // (later):
  console.log(this.textContent);
}

// using a CSS Selector, with document.querySelectorAll()
// to get a NodeList of <td> elements within the #tableID element:
var cells = document.querySelectorAll('#tableID td');

// iterating over the array-like NodeList, using
// Array.prototype.forEach() and Function.prototype.call():
Array.prototype.forEach.call(cells, function(td) {
  // the first argument of the anonymous function (here: 'td')
  // is the element of the array over which we're iterating.

  // adding an event-handler (the function logText) to handle
  // the click events on the <td> elements:
  td.addEventListener('click', logText);
});


function logText() {
  console.log(this.textContent);
}

var cells = document.querySelectorAll('#tableID td');

Array.prototype.forEach.call(cells, function(td) {
  td.addEventListener('click', logText);
});
th,
td {
  border: 1px solid #000;
  padding: 0.2em 0.3em 0.1em 0.3em;
}
<table id="tableID">
  <thead>
    <tr>
      <th>Column heading 1</th>
      <th>Column heading 2</th>
      <th>Column heading 3</th>
      <th>Column heading 4</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>43</td>
      <td>23</td>
      <td>89</td>
      <td>5</td>
    </tr>
    <tr>
      <td>4</td>
      <td>3</td>
      <td>0</td>
      <td>98</td>
    </tr>
    <tr>
      <td>10</td>
      <td>32</td>
      <td>7</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

JS Fiddle preuve de concept .

Références:

13
David Thomas

C'est ma solution

var cells = Array.prototype.slice.call(document.getElementById("tableI").getElementsByTagName("td"));
for(var i in cells){
    console.log("My contents is \"" + cells[i].innerHTML + "\"");
}
5
pbfy0

Vous pouvez utiliser:

<td onclick='javascript:someFunc(this);'></td>

En passant this vous pouvez accéder à l’objet DOM via les paramètres de votre fonction. 

1
Afshin Mehrabani

.......................

  <head>

    <title>Search students by courses/professors</title>

    <script type="text/javascript">

    function ChangeColor(tableRow, highLight)
    {
       if (highLight){
           tableRow.style.backgroundColor = '00CCCC';
       }

    else{
         tableRow.style.backgroundColor = 'white';
        }   
  }

  function DoNav(theUrl)
  {
  document.location.href = theUrl;
  }
  </script>

</head>
<body>

     <table id = "c" width="180" border="1" cellpadding="0" cellspacing="0">

            <% for (Course cs : courses){ %>

            <tr onmouseover="ChangeColor(this, true);" 
                onmouseout="ChangeColor(this, false);" 
                onclick="DoNav('http://localhost:8080/Mydata/ComplexSearch/FoundS.jsp?courseId=<%=cs.getCourseId()%>');">

                 <td name = "title" align = "center"><%= cs.getTitle() %></td>

            </tr>
           <%}%>

........................
</body>

J'ai écrit le tableau HTML dans JSP . Course is is a type. Par exemple Course cs, cs = objet de type Course qui avait 2 attributs: id, title . courses est une ArrayList d’objets Course.

Le tableau HTML affiche tous les titres de cours dans chaque cellule. Ainsi, le tableau ne contient qu'une colonne: Course1 Course2 Course3 ......

 onclick="DoNav('http://localhost:8080/Mydata/ComplexSearch/FoundS.jsp?courseId=<%=cs.getCourseId()%>');"

Cela signifie qu'après que l'utilisateur sélectionne une cellule de tableau, par exemple "Cours2", le titre du cours "Cours2" sera dirigé vers la page où l'URL dirige l'utilisateur: http://localhost:8080/Mydata/ComplexSearch/FoundS.jsp. "Course2" arrivera sur la page FoundS.jsp. L'identifiant de "Course2" est courseId. Pour déclarer la variable courseId dans laquelle CourseX sera conservé, vous devez mettre un "?" après l'URL et à côté l'identificateur . Cela fonctionne.

0
Dia

J'ai donné à la table un identifiant pour pouvoir le trouver. Lors du chargement (lorsque la page est chargée par le navigateur), j'ai défini les gestionnaires d'événements onclick sur toutes les lignes de la table. Ces gestionnaires alertent le contenu de la première cellule.

<!DOCTYPE html>
<html>
    <head>
        <script>
            var p = {
                onload: function() {
                    var rows = document.getElementById("mytable").rows;
                    for(var i = 0, ceiling = rows.length; i < ceiling; i++) {
                        rows[i].onclick = function() {
                            alert(this.cells[0].innerHTML);
                        }
                    }
                }
            };
        </script>
    </head>
    <body onload="p.onload()">
        <table id="mytable">
            <tr>
                <td>0</td>
                <td>row 1 cell 2</td>
            </tr>
            <tr>
                <td>1</td>
                <td>row 2 cell 2</td>
            </tr>
        </table>    
    </body>
</html>
0
Tom