Come ottenere valori html <td> utilizzando javascript?

Im molto nuovo per html e javascript.Come ottenere valori html <td> utilizzando javascript?

Desidero ottenere il contenuto dell'elemento ogni volta che l'utente fa clic su una riga della tabella utilizzando javascript.

test.html

<html> 
<head> 
<script text="text/javascript"> 
function dispTblContents() { 
var pName = document.getElementById("pName").value; 
var pAddress = document.getElementById("pAddress").value; 
var pEmail = document.getElementById("pEmail").value; 

alert(pName + " " + pAddress + " " + pEmail); 
} 
</script> 
</head> 

<body> 
<table> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Address </th> 
      <th>Email</th> 
     </tr> 
    </thead> 

    <tbody> 
     <tr onclick="dispTblContents();" > 
      <td id="pName">Ricardo Lucero</td> 
      <td id="pAddress">Mexico City, Mexico</td> 
      <td id="pEmail">[email protected]</td> 
     </tr> 
    </tbody> 

</table> 
</body> 
</html>

Ogni volta che fare clic sulla riga visualizza undefined undefined undefined. So che il mio codice è sbagliato ma davvero non so come risolvere questo problema. Qualcuno può aiutarmi per favore. Sono molto nuovo a questa cosa. Grazie in anticipo.

fonte

2011-10-20 NinjaBoy

È necessario innerHTML non value qui, value viene utilizzato per gli elementi del modulo.

<script text="text/javascript"> 
function dispTblContents() { 
var pName = document.getElementById("pName").innerHTML; 
var pAddress = document.getElementById("pAddress").innerHTML; 
var pEmail = document.getElementById("pEmail").innerHTML; 

alert(pName + " " + pAddress + " " + pEmail); 
} 
</script>

Si potrebbe anche voler guardare in jQuery se non stai ancora utilizzando, fa selezione e la manipolazione di HTML con Javascript molto più facile.

fonte

2011-10-20 02:29:12 mikel

L'utilizzo di * innerText * o * textContent * (come appropriato) sarebbe migliore in modo che il markup non venga restituito. – RobG

cambio Da value a innerHTML

fonte

2011-10-20 02:29:57

tenta di modificare il valore -innerHTML o innerText

document.forms[0].getElementsByTagId("pName").innerText;

fonte

2011-10-20 02:30:29 Seralize

Un tag <td> non ha un valore.

Utilizzare invece document.getElementById("pName").innerHTML.

fonte

2011-10-20 02:31:44 Dennis

Ho cercato molto anche per questo. Finalmente riesco a vedere la soluzione degli insegnanti. Questo è un esempio che funziona:

........... 
    <head>    
     <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> 

    <% ArrayList<Student> students = StudentsManager.getInstance().getStudents(); %> 

    <body> 
     Choose a student <br> 

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

      <% for (Student st : students){ %> 

      <tr onmouseover="ChangeColor(this, true);" 
       onmouseout="ChangeColor(this, false);" 
       onclick="DoNav('http://localhost:8080/Mydata/ComplexSearch/FoundC.jsp?studentId=<%=st.getStudentId()%>');"> 

       <td name = "title" align = "center"><%= st.getStudentId() %></td> 

      </tr> 
      <%}%> 

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

studenti è un ArrayList che contiene oggetti di tipo Student (StudentID, nome). La tabella mostra tutti gli studenti. Prima di fare clic su una cella, fai clic su Visualizza sorgente. Vedrete:

<tr onmouseover="ChangeColor(this, true);" 
      onmouseout="ChangeColor(this, false);" 
      onclick="DoNav('http://localhost:8080/Mydata/ComplexSearch/FoundC.jsp?studentId=1');"> 

      <td name = "title" align = "center">1</td> 

     </tr>

bene nel mio caso è stato "1". Non ho ancora creato la pagina di destinazione.

fonte

2012-07-26 12:50:25 Dia

Come ottenere valori html <td> utilizzando javascript?

risposta

Problemi correlati