access table cell data inside 'div' through 'class'
<p>Like to know how to read table cells, each cell data is within  . example of table and sample code is here <a href="http://jsfiddle.net/ccvq05br/7/" rel="nofollow">http://jsfiddle.net/ccvq05br/7/</a>
the javascript function is not being called in jsfiddle. did i do any mistake?!</p>

<p>I cant use the id as it is used for other calculation, is there a way to use class name or otherwise ? want to access cell without its id !!</p>

<p>javascript code in jsfiddle is not getting called. is there any problem in my code?!</p>

<p>HTML CODE:</p>

<pre><code>&lt;br&gt;
&lt;table id="tableID" border="1"&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;Data1&lt;/th&gt;
            &lt;th&gt;Data2&lt;/th&gt;
            &lt;th&gt;Data3&lt;/th&gt;
            &lt;th&gt;Data4&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
 &lt;tbody&gt;
   &lt;tr&gt;
    &lt;td&gt;
       &lt;input type="checkbox" class ="data1" name="val1" id="ChkBox_M21"&gt;
    &lt;/td&gt;
    &lt;td&gt;
     &lt;div class="form-group"&gt;
  &lt;select class="form-control" class="data2"  name="val2" id="Data_M21" &gt;
       &lt;option value='1' selected&gt;1&lt;/option&gt;
       &lt;option value='2' &gt;2&lt;/option&gt;
       &lt;option value='3' &gt;3&lt;/option&gt;
      &lt;/select&gt;
   &lt;/div&gt;
  &lt;/td&gt;

   &lt;td&gt;
     &lt;input class="data3" size="4" name="val3" type="text"  id="Txt_M31"&gt;
   &lt;/td&gt;
   &lt;td&gt;
&lt;div class="form-group"&gt;
  &lt;select class="form-control" class="data4"  name="val4" id="Data_M21" &gt;
       &lt;option value='Opt1' selected&gt;Opt1&lt;/option&gt;
       &lt;option value='Opt2' &gt;Opt2&lt;/option&gt;
       &lt;option value='Opt3' &gt;Opt3&lt;/option&gt;
      &lt;/select&gt;
   &lt;/div&gt;
   &lt;/td&gt;
  &lt;/tr&gt;


  &lt;!-- 2nd row --&gt;

   &lt;tr&gt;
    &lt;td&gt;
       &lt;input type="checkbox" class ="data1" name="val1" id="ChkBox_M21"&gt;
    &lt;/td&gt;
    &lt;td&gt;
     &lt;div class="form-group"&gt;
  &lt;select class="form-control" class="data2"  name="val2" id="Data_M21" &gt;
       &lt;option value='1' selected&gt;1&lt;/option&gt;
       &lt;option value='2' &gt;2&lt;/option&gt;
       &lt;option value='3' &gt;3&lt;/option&gt;
      &lt;/select&gt;
   &lt;/div&gt;
  &lt;/td&gt;

   &lt;td&gt;
     &lt;input class="data3" size="4" name="val3" type="text"  id="Txt_M31"&gt;
   &lt;/td&gt;
   &lt;td&gt;
&lt;div class="form-group"&gt;
  &lt;select class="form-control" class="data4"  name="val4" id="Data_M21" &gt;
       &lt;option value='Opt1' selected&gt;Opt1&lt;/option&gt;
       &lt;option value='Opt2' &gt;Opt2&lt;/option&gt;
       &lt;option value='Opt3' &gt;Opt3&lt;/option&gt;
      &lt;/select&gt;
   &lt;/div&gt;
   &lt;/td&gt;
  &lt;/tr&gt;




  &lt;/tbody&gt;
&lt;/table&gt;


&lt;br&gt;&lt;br&gt;
&lt;input type="button" value="Read Data" onclick="callFunc()"/&gt; 
</code></pre>

<p>Javascript Code :</p>

<pre><code>function callFunc(){
   alert("hi");
    var oTable = document.getElementById("tableId");

    //gets rows of table
    var rowLength = oTable.rows.length;

    //loops through rows    
    for (i = 0; i &lt; rowLength; i++){

        //gets cells of current row
        var oCells = oTable.rows.item(i).cells;
/*  get the cell info of first row
    How to get values of each cell which is inside div
    and only can use 'class' to identify specific cells in a row.
    id is used for some calculation purpose.
*/
        var cell1Val = oCells.item(0).innerHTML;

           alert("cell 1 value    :  " + cellVal);
        var cell1Val = oCells.item(1).innerHTML;
          alert("cell 2 value    :  " + cellVal);
        var cell1Val = oCells.item(2).innerHTML;
          alert("cell 3 value    :  " + cellVal);
        var cell1Val = oCells.item(3).innerHTML;
         alert("cell 4 value    :  " + cellVal);

    }


}
</code></pre>