1
votes

Remplacer le texte des éléments TH d'une table par Javascript

J'ai une page en wordpress et un plugin crée un tableau, mais je veux changer le texte du "th"

Mon problème est que je ne peux pas accéder au code et j'aimerais le faire avec javascript mais Je n'ai pas pu le faire, car les "th" n'ont pas d'identifiant.

ceci fait partie du tableau:

<th>Nombre</th>
<th>Apellido</th>
<th>Curso o Quiz</th>
<th>Fecha de TerminaciÃ³n</th>

I j'essaye de changer comme ça

<p id="search-table">
<table id="elc_search-table">
<thead><tr style="vertical-align: baseline;">
                    
<th>First Name</th>
<th>Last Name</th>
<th>Course or Quiz Title</th>
<th>Completion Date</th>

</tr>
</thead>

javascript jquery html

2 commentaires

"Je ne parviens pas à accéder au code" ou vous ne le trouvez pas?

Pouvez-vous mettre à jour votre fichier HTML

3 Réponses :

0
votes

Vous pouvez le sélectionner en utilisant une balise comme getElementsByTagName ou par un sélecteur ccs comme querySelectorAll les deux retours dans un tableau donc vous devez les indexer pour leur donner une valeur différente

<p id="search-table">
  <table id="elc_search-table">
    <thead>
      <tr style="vertical-align: baseline;">

        <th>First Name</th>
        <th>Last Name</th>
        <th>Course or Quiz Title</th>
        <th>Completion Date</th>

      </tr>
    </thead>

th = document.getElementsByTagName('th')[0].innerHTML = 'Nombre';
th = document.getElementsByTagName('th')[1].innerHTML = 'Apellido';
th = document.getElementsByTagName('th')[2].innerHTML = 'Curso o Quiz';
th = document.getElementsByTagName('th')[3].innerHTML = 'Fecha de TerminaciÃ³n';

8 commentaires

Je ne comprends pas non plus ce qui se passe. J'ai également essayé de répondre en utilisant html-template. Quelqu'un a voté contre. J'ai maintenant supprimé ma réponse. Ce n'est vraiment pas bon. Qui fait cela et pourquoi?

.innerHTML n'est pas recommandé pour être utilisé. Pensez à utiliser autre chose.

Je ne sais pas @ImranRafiqRather mais je ne devrais pas supprimer une réponse qui n'est pas une bonne idée

Ont restauré. Merci pour vos conseils @Gad

À partir du MDN => Avertissement: Si votre projet est soumis à une quelconque forme d'examen de sécurité, l'utilisation de innerHTML entraînera très probablement le rejet de votre code. Par exemple, si vous utilisez innerHTML dans une extension de navigateur et soumettez l'extension à addons.mozilla.org, il ne passera pas le processus d'examen automatisé.

Qu'est-ce qui devrait être mieux à utiliser? @ToujoursAide

Cette réponse n'est pas non plus efficace. cela échouera s'il y a plus d'UNE table sur la page OP. Votre réponse changera tous les th sur la même page.

@Gad utilise .textContent () au lieu de innerHTML

2
votes

Ajoutez ce script dans votre fichier Javascript pour changer l'en-tête:

const tr1 = document.querySelector('#elc_search-table thead tr:first-child');
const htmlTemplate = `
<th>Nombre</th>
<th>Apellido</th>
<th>Curso o Quiz</th>
<th>Fecha de TerminaciÃ³n</th>`;

tr1.innerHTML = htmlTemplate;

Et cela remplacera le contenu de votre thead .

p >

8 commentaires

Quiconque a voté contre, veuillez donner votre justification. Merci

pas mon vote négatif - .innerHTML n'est pas recommandé pour être utilisé. Pensez à utiliser autre chose. En savoir plus sur innerHTML sur MDN.

Même moi, je sais, mais appendChild () ne fonctionne pas pour htmlTemplates. De plus, personne ne dit de ne jamais utiliser innerHTML. Au cas où nous devions remplacer complètement le HTML par un nouveau HTML, avez-vous des suggestions précises.

En savoir plus sur Javascript MDN quoi d'autre peut être utilisé. Vous saurez pourquoi pas innerHTML et quoi d'autre peut être utilisé.

Cette réponse n'est pas non plus efficace. cela échouera s'il y a plus d'UNE table sur la page OP. Votre réponse changera tous les th sur la même page.

Ce n'est sûrement pas un problème, je peux utiliser l'identifiant de la table dans mon sélecteur. Nous respectons vraiment votre recherche. Mais pour un petit problème comme celui-ci, il importe peu que nous utilisions appendChild () ou innerHTML.

Modifiez ensuite votre réponse et corrigez-la en effectuant vos propres recherches. J'essaie simplement de mettre en évidence les problèmes que vous rencontrez dans votre réponse actuelle.

C'est déjà fait ... Et je suis moi-même un développeur Web Front End avec 3 ans d'expérience maintenant :) J'apprécie vraiment vos suggestions ...

0
votes

jQuery résoudrait vos problèmes dont vous vous inquiétez actuellement.

jQuery('#question-header th')[0] = 'Nombre';
jQuery('#question-header th')[1] = 'Apellido';
jQuery('#question-header th')[2] = 'Curso o Quiz';
jQuery('#question-header th')[3] = 'Fecha de TerminaciÃ³n';

0 commentaires