All geek questions in one place

How to get html <td> values ​​using javascript?

Im very new to html and javascript.

I want to get the contents of an element whenever a user clicks on a table row using 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"> rlucero@test.com </td> </tr> </tbody> </table> </body> </html>

Whenever I click on a line, it displays undefined undefined undefined . I know my code is wrong, but I really don't understand how to fix it. Can someone please help me. I am very new to this. Thanks in advance.

+6
source share
5 answers

You need innerHTML not value here, value used for form elements.

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

You can also look in jQuery, if you are not already using it, it simplifies the selection and management of HTML using Javascript.

+11
source

Try changing the value to innerHTML

+1
source

Try changing the value to innerHTML or innerText

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

A <td> doesn't matter .

Use document.getElementById("pName").innerHTML instead.

+1
source

I also searched a lot. Finally, I see that teaches a solution. This is an example that works:

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

students is an ArrayList that contains objects of type Student (studentId, name). The table displays all students. If you click on a cell, click the view source. You will see:

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

In my case it was "1". I have not done the destination page yet.

+1
source

Source: https://habr.com/ru/post/899663/

More articles:


All Articles