Get Table Cell value using Javascript

G

Guest

How do I get the text from my cell e..g. <td>Test Text</td>



var elTableCells = elTableRow.getElementsByTagName("td");

alert(elTableCells[0].innerText);
 
R

Ray Costanzo

You answered your own question. What you're doing below should work, as
long as elTableRow is defined prior to that call. Sample:

<html><body>
<script type="text/javascript">
function test() {
var elTableRow = document.getElementById("somerow");
var elTableCells = elTableRow.getElementsByTagName("td");
alert(elTableCells[0].innerText);
}
</script>
<button onclick="test()">click me</button>
<table>
<tr id="somerow">
<td>cell 1</td>
<td>cell 2</td>
</tr>
</table>
</body>
</html>
 
G

Guest

Hi,
Try this code:
<td id ="tdname">Test Text</td>
alert(document.forms[0].getElementsByTagId("tdname").innerText);
you need to take care of case-sensitivity as javascript is
case-sensitive(that i have not taken care in above code)
Hope this helps
 
Joined
Jul 25, 2012
Messages
1
Reaction score
0
Getting value from HTML table with JS

You can get cell value with JS even when click on the cell:

Code:
.......................
    
          <head>
               
            <title>Search students by courses/professors</title>
             
            <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>
        <body>
        
             <table id = "c" width="180" border="1" cellpadding="0" cellspacing="0">
            
                    <% for (Course cs : courses){ %>
              
                    <tr onmouseover="ChangeColor(this, true);" 
                        onmouseout="ChangeColor(this, false);" 
                        onclick="DoNav('http://localhost:8080/Mydata/ComplexSearch/FoundS.jsp?courseId=<%=cs.getCourseId()%>');">
                 
                         <td name = "title" align = "center"><%= cs.getTitle() %></td>
                               
                    </tr>
                   <%}%>
        
        ........................
        </body>

I wrote the HTML table in JSP.
**Course** is is a type. For example Course cs, cs= object of type Course which had 2 attributes: id, title.
**courses** is an ArrayList of Course objects.

The HTML table displays all the courses titles in each cell. So the table has 1 column only:
Course1
Course2
Course3
......
Taking aside:

Code:
 onclick="DoNav('http://localhost:8080/Mydata/ComplexSearch/FoundS.jsp?courseId=<%=cs.getCourseId()%>');"

This means that after user selects a table cell, for example "Course2", the title of the course- "Course2" will travel to the page where the URL is directing the user:
Code:
http://localhost:8080/Mydata/ComplexSearch/FoundS.jsp
. "Course2" will arrive in FoundS.jsp page. The identifier of "Course2" is courseId. To declare the variable courseId, in which CourseX will be kept, you put a "?" after the URL and next to it the identifier.
It works.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,733
Messages
2,569,440
Members
44,832
Latest member
GlennSmall

Latest Threads

Top