How to get html <td> values using javascript?

Question

Im very new to html and javascript.

I want to get the content of element whenever the user click 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">[email protected]</td>
        </tr>
    </tbody>

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

Whenever I click the row it displays undefined undefined undefined. I know my code is wrong but I really don't how to fix this. Can somebody please help me. Im very new to this thing. Thanks in advance.

Michael Low · Accepted Answer · 2011-10-20 02:29:12Z

12

You need innerHTML not value here, value is 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 might also want to look into jQuery if you're not using it yet, it makes selecting and manipulating HTML with Javascript a lot easier.

answered Oct 20, 2011 at 2:29

Michael Low

24.5k17 gold badges85 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RobG Over a year ago

Using innerText or textContent (as appropriate) would be better so that markup is not returned.

Seralize · Accepted Answer · 2011-10-20 02:30:29Z

2

Try to change value to innerHTML or innerText

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

answered Oct 20, 2011 at 2:30

Seralize

1,12712 silver badges27 bronze badges

Comments

Mr.J4mes · Accepted Answer · 2011-10-20 02:29:57Z

1

Try change value to innerHTML

answered Oct 20, 2011 at 2:29

Mr.J4mes

9,28412 gold badges51 silver badges92 bronze badges

Comments

Dennis · Accepted Answer · 2011-10-20 02:31:44Z

1

A <td> tag doesn't have a value.

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

answered Oct 20, 2011 at 2:31

Dennis

14.5k3 gold badges51 silver badges58 bronze badges

Comments

Diana · Accepted Answer · 2012-07-26 12:50:25Z

I searched a lot for it too. Finally I get to see teaches's 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 the students. Befor you click on a cell, click view source. You'll 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>

Well in my case was "1". I didn't make the destination page yet.

Collectives™ on Stack Overflow

How to get html <td> values using javascript?

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related