'div'到'class'內的訪問表單元格數據

Question

想知道如何讀取表格單元格，每個單元格數據都在其中。表格和示例代碼的示例在這裏http://jsfiddle.net/ccvq05br/7/ JavaScript函數未在jsfiddle中調用。我做錯了嗎？！

我不能使用id，因爲它用於其他計算，有沒有辦法使用類名或否則？想要訪問單元沒有它的ID！

jsfiddle中的JavaScript代碼沒有被調用。我的代碼中有沒有問題？

HTML代碼：

<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")。

爲了得到內的每個在上述實例中的單元格的內容，我們可以使用：

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

我們也可以在代碼段使用document.getElementsByClassName("sampleTable")在行號2，提供了一個「sampleTable」是類應用於表