Jak uzyskać wartości html <td> za pomocą javascript?

Jestem bardzo nowy w html i javascript.Jak uzyskać wartości html <td> za pomocą javascript?

Chcę uzyskać zawartość elementu, gdy użytkownik kliknie wiersz tabeli przy użyciu 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>

Ilekroć kliknij wiersz wyświetla undefined undefined undefined. Wiem, że mój kod jest błędny, ale naprawdę nie wiem jak to naprawić. Czy ktoś mógłby mi pomóc. Jestem bardzo nowa w tej rzeczy. Z góry dziękuję.

Źródło

2011-10-20 NinjaBoy

Trzeba innerHTML nie value tutaj, value służy do elementów formularza.

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

Można również zajrzeć do jQuery, jeśli nie jesteś jeszcze jej użyciem, to sprawia, że wybranie i manipulowanie HTML z JavaScript dużo łatwiejsze.

Źródło

2011-10-20 02:29:12 mikel

Używanie * innerText * lub * textContent * (w zależności od potrzeb) byłoby lepsze, aby znaczniki nie były zwracane. – RobG

Spróbuj zmiana value do innerHTML

Źródło

2011-10-20 02:29:57

Spróbuj zmienić wartość do innerHTML lub innerText

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

Źródło

2011-10-20 02:30:29 Seralize

<td> tag nie ma wartości.

Zamiast tego użyj document.getElementById("pName").innerHTML.

Źródło

2011-10-20 02:31:44 Dennis

Dużo też szukałem. W końcu dostaję rozwiązanie dla nauczycieli. Jest to przykład, który działa:

........... 
    <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> 
      <%}%> 

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

studenci jest ArrayList, która zawiera obiekty typu Student (studentId, nazwa). Tabela wyświetla wszystkich uczniów. Zanim klikniesz komórkę, kliknij opcję wyświetl źródło. Zobaczysz:

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

Cóż w moim przypadku było "1". Nie utworzyłem jeszcze strony docelowej.

Źródło

2012-07-26 12:50:25 Dia

Jak uzyskać wartości html <td> za pomocą javascript?

Odpowiedz

Powiązane problemy