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)

＆＃13;

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

＆＃13;

<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()"/>

＆＃13;

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

我们还可以在代码段中的第2行使用document.getElementsByClassName("sampleTable")，前提是“sampleTable”是应用于表格的类

通过'class'访问'div'里面的表格单元格数据

2 个答案: