'div'から 'class'の中のテーブルセルのデータにアクセスする

Question

テーブルのセルを読み込む方法と同様に、各セルのデータは内部にあります。テーブルとサンプルコードの例はこちらhttp://jsfiddle.net/ccvq05br/7/ jsfiddleでjavascript関数が呼び出されていません。私は間違いをしましたか？

他の計算に使用されているIDを使用できません。クラス名などを使用する方法はありますか？ IDなしでセルにアクセスしたい！

jsfiddleのjavascriptコードが呼び出されていません。私のコードに問題はありますか？

HTMLのCODE：

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

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


    <!-- 2nd row --> 

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

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




    </tbody> 
</table> 


<br><br> 
<input type="button" value="Read Data" onclick="callFunc()"/> 

Javascriptのコード：

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

    } 


} 

Answer 1

あなたは、テーブルからすべてのデータにアクセスするために、セルのインデックスと行のインデックスを使用することができます。 exemaple：oTable.rows.item(rowIndex).cells.item(cellIndex)

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 < rowLength; i++){ 
 

 
     //gets cells of current row 
 
     var oCells = oTable.rows.item(i).cells; 
 
     var cell1Val = oCells.item(0).innerHTML; 
 

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

 
}

<br> 
 
<table id="tableID" border="1"> 
 
    <thead> 
 
     <tr> 
 
      <th>Data1</th> 
 
      <th>Data2</th> 
 
      <th>Data3</th> 
 
      <th>Data4</th> 
 
     </tr> 
 
    </thead> 
 
<tbody> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" class ="data1" name="val1" id="ChkBox_M21"> 
 
    </td> 
 
    <td> 
 
    <div class="form-group"> 
 
    <select class="form-control" class="data2" name="val2" id="Data_M21" > 
 
     <option value='1' selected>1</option> 
 
     <option value='2' >2</option> 
 
     <option value='3' >3</option> 
 
     </select> 
 
    </div> 
 
    </td> 
 
    
 
    <td> 
 
    <input class="data3" size="4" name="val3" type="text" id="Txt_M31"> 
 
    </td> 
 
    <td> 
 
<div class="form-group"> 
 
    <select class="form-control" class="data4" name="val4" id="Data_M21" > 
 
     <option value='Opt1' selected>Opt1</option> 
 
     <option value='Opt2' >Opt2</option> 
 
     <option value='Opt3' >Opt3</option> 
 
     </select> 
 
    </div> 
 
    </td> 
 
    </tr> 
 
    
 
    
 
    <!-- 2nd row --> 
 

 
    <tr> 
 
    <td> 
 
     <input type="checkbox" class ="data1" name="val1" id="ChkBox_M21"> 
 
    </td> 
 
    <td> 
 
    <div class="form-group"> 
 
    <select class="form-control" class="data2" name="val2" id="Data_M21" > 
 
     <option value='1' selected>1</option> 
 
     <option value='2' >2</option> 
 
     <option value='3' >3</option> 
 
     </select> 
 
    </div> 
 
    </td> 
 
    
 
    <td> 
 
    <input class="data3" size="4" name="val3" type="text" id="Txt_M31"> 
 
    </td> 
 
    <td> 
 
<div class="form-group"> 
 
    <select class="form-control" class="data4" name="val4" id="Data_M21" > 
 
     <option value='Opt1' selected>Opt1</option> 
 
     <option value='Opt2' >Opt2</option> 
 
     <option value='Opt3' >Opt3</option> 
 
     </select> 
 
    </div> 
 
    </td> 
 
    </tr> 
 
    
 

 
    
 
    
 
    </tbody> 
 
</table> 
 

 
<br><br> 
 
<input type="button" value="Read Data" onclick="callFunc()"/> 
 

Answer 2

ID属性を使用せずに、表のセル内のコンテンツを取得するために、我々はdocument.getElementsByTagName("tagName")またはdocument.getElementsByClassName("className")を使用することができます。

上記の例では各セル内のコンテンツを取得するため、我々は使用できます。我々はまた、コードスニペットのライン番号2でdocument.getElementsByClassName("sampleTable")を使用することができ

function callFunc(){ 
    var oTable = document.getElementsByTagName('table'); ---- Line Number(2) 
    //gets rows of table 
    for(var i = 0, table; table = oTable[i]; i++){ 
     for (var j = 0, row; row = oTable[i].rows[j]; j++) { 
     console.log("Content in row" + j+" : \n" ); 
     for (var k = 0, col; col = row.cells[k]; k++) { 
     var value = col.innerHTML; 
     console.log("cell "+k+" value : " + value);  
     } 
    } 
    } 
} 

は、「SampleTableを」が提供されますテーブルに適用されたクラス