Get a particular cell value from HTML table using JavaScript

I want to get each cell value from an HTML table using JavaScript when pressing submit button.

How to get HTML table cell values?


To get the text from this cell-

    <tr id="somerow">
        <td>some text</td>            

You can use this -

var Row = document.getElementById("somerow");
var Cells = Row.getElementsByTagName("td");

function Vcount() {
var modify = document.getElementById("C_name1").value;
var oTable = document.getElementById('dataTable');
var i;
var rowLength = oTable.rows.length;
for (i = 1; i < rowLength; i++) {
    var oCells = oTable.rows.item(i).cells;
    if (modify == oCells[0] {
        document.getElementById("Error").innerHTML = "  * duplicate value";
        return false;


You can also use the DOM way to obtain the cell value: Cells[0]

Read more on that in my post at

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



        <title>Search students by courses/professors</title>

        <script type="text/javascript">

        function ChangeColor(tableRow, highLight)
           if (highLight){
      = '00CCCC';

    = 'white';

      function DoNav(theUrl)
      document.location.href = theUrl;


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

                <% for (Course cs : courses){ %>

                <tr onmouseover="ChangeColor(this, true);" 
                    onmouseout="ChangeColor(this, false);" 

                     <td name = "title" align = "center"><%= cs.getTitle() %></td>



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:


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

I told you just in case you'll want to use it because I searched a lot for it and I found questions like mine. But now I found out from teacher so I post where people asked.

The example is working.I've seen.

var table = document.getElementById("someTableID"); 
var totalRows = document.getElementById("someTableID").rows.length;
var totalCol = 3; // enter the number of columns in the table minus 1 (first column is 0 not 1)
//To display all values
for (var x = 0; x <= totalRows; x++)
  for (var y = 0; y <= totalCol; y++)
//To display a single cell value enter in the row number and column number under rows and cells below:
var firstCell = table.rows[0].cells[0].innerHTML;
//Note:  if you use <th> this will be row 0, so your data will start at row 1 col 0

Just simply.. #sometime when larger table we can't add the id to each tr

            <td>some text</td>

        var cell = document.getElementsByTagName("td"); 
        var i = 0;
        while(cell[i] != undefined){
            alert(cell[i].innerHTML); //do some alert for test
            }//end while

I found this as an easiest way to add row . The awesome thing about this is that it doesn't change the already present table contents even if it contains input elements .

row = `<tr><td><input type="text"></td></tr>`
$("#table_body tr:last").after(row) ;

Here #table_body is the id of the table body tag .

<td class="virtualTd" onclick="putThis(this)">my td value </td>

function putThis(control) { 

Make a javascript function

function addSampleTextInInputBox(message) {
    //set value in input box
    document.getElementById('textInput').value = message + "";
    //or show an alert

Then simply call in your table row button click

<td class="center">
    <a class="btn btn-success" onclick="addSampleTextInInputBox('<?php echo $row->message; ?>')" title="Add" data-toggle="tooltip" title="Add">
        <span class="fa fa-plus"></span>

Need Your Help

Tracking reference in C++/CLI


Can someone please explain me the following code snippet?

After update of AS to 1.0, getting "method ID not in [0, 0xffff]: 65536" error in project

android gradle android-studio dex

I updated Android Studio to the latest version, and let it "fix the project" and the like - but now my project does not compile, gives me