3
votes

Comment utiliser l'id de la table parent comme paramètre dans l'événement onclick?

J'aurai ce bouton une fois pour chaque table (environ 25 tables distinctes) sur cette page et j'espère trouver un moyen d'avoir l'appel à l'événement onclick la fonction constructDataValueString et passez le id de la table parent (pour ne pas avoir à référencer explicitement l'identifiant de la table).

Y a-t-il un moyen de write:

onclick="constructDataValueString(*id_of_parent_table*)"

Exemple graphique du balisage HTML:

javascript html html-table

0 commentaires

5 Réponses :

1
votes

Bien sûr - utilisez this.parentNode.parentNode.parentNode.parentNode.id:

<table id="populationbyage">
  <tbody>
    <tr>
      <td>
        <button onclick="constructDataValueString(this.parentNode.parentNode.parentNode.parentNode.id)">Copy</button>
      </td>
    </tr>
  </tbody>
</table>

function constructDataValueString(id) {
  console.log(id);
}

(Ce qui précède est un exemple minimaliste - il suit exactement la même structure, il n'a que les éléments et attributs nécessaires.

0 commentaires

4
votes

Vous pouvez utiliser plus proche () , par exemple:

<table id="populationbyage" border="2">
<thead>TABLE</thead>
<tbody>
  <tr>
    <td>
      Some Cell...
    </td>
    <td>
      <button onclick="constructDataValueString(this.closest('table').id)">
        Copy
      </button>
    </td>
  </tr>
</tbody>
</table>

Exemple

.as-console {background-color:black !important; color:lime;}
.as-console-wrapper {max-height:50% !important;}

const constructDataValueString = (id) => console.log("table id is: ", id);

onclick="constructDataValueString(this.closest('table').id)"

1 commentaires

Quelques secondes d'avance avec le même exemple, félicitations!

0
votes

Une solution plus flexible

function parent(el, selector) {
    var matchesFn;

    // find vendor prefix
    ['matches', 'webkitMatchesSelector', 'mozMatchesSelector', 'msMatchesSelector', 'oMatchesSelector'].some(function (fn) {
        if (typeof document.body[fn] == 'function') {
            matchesFn = fn;
            return true;
        }
        return false;
    });

    var parent;

    // traverse parents
    while (el) {
        parent = el.parentElement;
        if (parent && parent[matchesFn](selector)) {
            return parent;
        }
        el = parent;
    }

    return null;
}

<table id="populationbyage">
  <tbody>
    <tr>
      <td>
        <button onclick="console.log(parent(event.target, '#populationbyage'))">Copy</button>
      </td>
    </tr>
  </tbody>
</table>

0 commentaires

1
votes

Pour vous assurer que votre structure interne de table peut changer sans affecter cette partie, vous pouvez utiliser this.closest ("table") afin d'obtenir le premier

élément, d'où vous pouvez obtenir l'identifiant:

constructDataValueString(this.closest("table").id)

0 commentaires

0
votes

Comme d'autres réponses le suggèrent, utilisez le plus proche () https://developer.mozilla.org/en-US/ docs / Web / API / Element / plus proche

Pour répondre à votre question et également pour s'adresser à quelqu'un qui souhaite qu'un élément particulier soit envoyé, il existe un moyen d'envoyer exactement l'identifiant de la table ou de tu veux.

`<table id="populationbyage" border="2">
<thead>TABLE</thead>
<tbody>
  <tr>
    <td>
      Some Cell...
    </td>
    <td>
      <button onclick="constructs(this.closest('#populationbyage').id)">
        Copy
      </button>
    </td>
  </tr>
</tbody>
</table>
<script>
    function constructs(id) {
        console.log(id)     
    }
</script>
`

La récupération de l'approche id identifiera la table à laquelle vous voulez accéder ici. Cela vous aidera à ignorer toutes les tables imbriquées si à l'avenir vous souhaitez en ajouter.

0 commentaires