2010-02-15 4 views
0

J'essaie de changer le texte d'une cellule de tableau lorsque seul l'élément <table> a un ID, il n'y a pas d'ID défini sur les cellules, par ex. Comment puis-je changer le texte de la deuxième cellule (Cellule 2) en Javascript sans spécifier explicitement un identifiant pour cette deuxième cellule (Cellule 2) en Javascript?Accès au texte de la cellule en Javascript

Merci,

AJ

Répondre

6

C'est très facile à faire avec jQuery, mais je suppose que vous voulez utiliser des méthodes DOM natives. Dans ce cas,

document.getElementById('test').getElementsByTagName('td')[1] 

vous mènera à la deuxième cellule de tableau de cette table.

https://developer.mozilla.org/en/Traversing_an_HTML_table_with_JavaScript_and_DOM_Interfaces

+0

C'est parfait, merci! –

+0

Pas de problème. Je recommanderais quand même d'utiliser jQuery parce que cela rend votre code beaucoup plus concis, réduit le texte standard et rend l'écriture Javascript beaucoup moins infernale. –

+0

Il fonctionne bien mieux que mon propre approche. Merci. –

0

En utilisant jQuery, cette tâche serait aussi simple que:

$('#test td:first').text('Your new text goes here'); 

Je recommande fortement jQuery. Vous obtiendrez probablement des réponses supplémentaires recommandant jQuery.

+0

Drew, l'OP a déclaré en second lieu, pas d'abord. –

+0

Oups - manqué cela. Dans ce cas, le sélecteur serait: '#test td: eq (1)' –

0

Quelque chose comme ça devrait fonctionner:

document.getElementById('test').childNodes[1].childNodes[1].childNodes[3].innerHTML='changed cell'; 
0

La façon la plus évidente pour moi est de le faire comme le code ci-dessous:

document.getElementById("test").rows[0].cells[1].innerHTML = "Cell not so 2." 

http://www.w3schools.com/jsref/coll_table_cells.asp

Si vous avez affaire à beaucoup de données, n'utilisez pas JQuery, comme c'est lent.

Vous pouvez regarder la compassion entre le traitement JQuery et DOM natif here (si vous suivez le lien dans ce message, la page a un graphique qui montre la différence entre les deux).

0

Vous pouvez le faire avec JS pur avec ce code:

document.querySelector('#test td:nth-child(2)').innerHTML = 'value changed'; 

support du navigateur pour c'est assez dieu: http://caniuse.com/#search=querySelector

Modifier

Malheureusement le code de @ Matt Ball est plus vite que vous pouvez voir ici: JSPerf.

Questions connexes