簡體   English   中英

如何遍歷 JavaScript 中的表格行和單元格?

[英]How do I iterate through table rows and cells in JavaScript?

如果我有一個 HTML 表......說

<div id="myTabDiv">
<table name="mytab" id="mytab1">
  <tr> 
    <td>col1 Val1</td>
    <td>col2 Val2</td>
  </tr>
  <tr>
    <td>col1 Val3</td>
    <td>col2 Val4</td>
  </tr>
</table>
</div>

我將如何遍歷所有表行(假設每次檢查時行數都會改變)並從 JavaScript 中的每一行中的每個單元格檢索值?

如果你想遍歷每一行( <tr> ),知道/識別行( <tr> ),並遍歷每一行( <tr> )的每一列( <td> <tr> ),那么這是方法走。

var table = document.getElementById("mytab1");
for (var i = 0, row; row = table.rows[i]; i++) {
   //iterate through rows
   //rows would be accessed using the "row" variable assigned in the for loop
   for (var j = 0, col; col = row.cells[j]; j++) {
     //iterate through columns
     //columns would be accessed using the "col" variable assigned in the for loop
   }  
}

如果您只想瀏覽單元格( <td> ),而忽略您所在的行,那么這就是要走的路。

var table = document.getElementById("mytab1");
for (var i = 0, cell; cell = table.cells[i]; i++) {
     //iterate through cells
     //cells would be accessed using the "cell" variable assigned in the for loop
}

你可以考慮使用jQuery。 使用 jQuery 非常簡單,可能看起來像這樣:

$('#mytab1 tr').each(function(){
    $(this).find('td').each(function(){
        //do your stuff, you can use $(this) to get current cell
    })
})

嘗試

for (let row of mytab1.rows) 
{
    for(let cell of row.cells) 
    {
       let val = cell.innerText; // your code below
    }
}

 for (let row of mytab1.rows) { for(let cell of row.cells) { console.log(cell.innerText) } }
 <div id="myTabDiv"> <table name="mytab" id="mytab1"> <tr> <td>col1 Val1</td> <td>col2 Val2</td> </tr> <tr> <td>col1 Val3</td> <td>col2 Val4</td> </tr> </table> </div>

 for ( let [i,row] of [...mytab1.rows].entries() ) { for( let [j,cell] of [...row.cells].entries() ) { console.log(`[${i},${j}] = ${cell.innerText}`) } }
 <div id="myTabDiv"> <table name="mytab" id="mytab1"> <tr> <td>col1 Val1</td> <td>col2 Val2</td> </tr> <tr> <td>col1 Val3</td> <td>col2 Val4</td> </tr> </table> </div>

 var table=document.getElementById("mytab1"); var r=0; //start counting rows in table while(row=table.rows[r++]) { var c=0; //start counting columns in row while(cell=row.cells[c++]) { cell.innerHTML='[R'+r+'C'+c+']'; // do sth with cell } }
 <table id="mytab1"> <tr> <td>A1</td><td>A2</td><td>A3</td> </tr> <tr> <td>B1</td><td>B2</td><td>B3</td> </tr> <tr> <td>C1</td><td>C2</td><td>C3</td> </tr> </table>

在每次通過 while 循環 r/c 迭代器增加時,集合中的新行/單元格對象被分配給行/單元格變量。 當集合中沒有更多行/單元格時,將 false 分配給行/單元格變量並在循環停止(退出)時進行迭代。

更好的解決方案:使用 Javascript 的原生Array.from()並將 HTMLCollection 對象轉換為數組,之后您可以使用標准數組函數。

var t = document.getElementById('mytab1');
if(t) {
    Array.from(t.rows).forEach((tr, row_ind) => {
        Array.from(tr.cells).forEach((cell, col_ind) => {
            console.log('Value at row/col [' + row_ind + ',' + col_ind + '] = ' + cell.textContent);
        });
    });
}

您還可以引用tr.rowIndexcell.colIndex而不是使用row_indcol_ind

與前 2 個最高投票答案相比,我更喜歡這種方法,因為它不會用全局變量ijrowcol弄亂您的代碼,因此它提供了干凈、模塊化的代碼,不會有任何副作用(或引發 lint / 編譯器警告)...沒有其他庫(例如 jquery)。

如果您需要它在舊版本(ES2015 之前)的 Javascript 中運行, Array.from可以是Array.from

這個解決方案非常適合我

var table = document.getElementById("myTable").rows;
var y;
for(i = 0; i < # of rows; i++)
{    for(j = 0; j < # of columns; j++)
     {
         y = table[i].cells;
         //do something with cells in a row
         y[j].innerHTML = "";
     }
}

如果你想要一個功能性的風格,像這樣:

    const table = document.getElementById("mytab1");
    const cells = table.rows.toArray()
                  .flatMap(row => row.cells.toArray())
                  .map(cell => cell.innerHTML); //["col1 Val1", "col2 Val2", "col1 Val3", "col2 Val4"]

您可以修改 HTMLCollection 的原型對象(允許以類似於 C# 中的擴展方法的方式使用)並在其中嵌入一個將集合轉換為數組的函數,允許使用具有上述樣式的高階函數(類似於 C# 中的 linq 樣式) C#):

    Object.defineProperty(HTMLCollection.prototype, "toArray", {
        value: function toArray() {
            return Array.prototype.slice.call(this, 0);
        },
        writable: true,
        configurable: true
    });

您可以使用.querySelectorAll()選擇所有td元素,然后遍歷這些與.forEach() 可以使用.innerHTML檢索它們的值:

 const cells = document.querySelectorAll('td'); cells.forEach(function(cell) { console.log(cell.innerHTML); })
 <table name="mytab" id="mytab1"> <tr> <td>col1 Val1</td> <td>col2 Val2</td> </tr> <tr> <td>col1 Val3</td> <td>col2 Val4</td> </tr> </table>

如果您只想從特定行中選擇列,您可以使用偽類:nth-child()來選擇特定的tr ,可選擇與子組合器 ( > ) 結合使用(如果您在表中有一個表):

 const cells = document.querySelectorAll('tr:nth-child(2) > td'); cells.forEach(function(cell) { console.log(cell.innerHTML); })
 <table name="mytab" id="mytab1"> <tr> <td>col1 Val1</td> <td>col2 Val2</td> </tr> <tr> <td>col1 Val3</td> <td>col2 Val4</td> </tr> </table>

使用單個 for 循環:

var table = document.getElementById('tableID');  
var count = table.rows.length;  
for(var i=0; i<count; i++) {    
    console.log(table.rows[i]);    
}

這是使用現代 Javascript ES6+ 的一種解決方案

    const rows = document.querySelector("table")?.rows;
    if (!rows) {
      return;
    }
    Array.from(rows).forEach(row => {
      console.log(row);
      const cells = Array.from(row.cells);
      cells.forEach(cell => {
        console.log(cell);
      });
    });

Array.from()將行和/或單元格的 HTMLCollection 轉換為可以迭代的常規 Javascript 數組。

table.rows使用文檔: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/rows

row.cells使用文檔: https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement

我將其留作將來用於抓取特定 HTML 表格列並打印結果的參考。

//select what table you want to scrape (is zero based)
//set 0 if there is only one
setTable=0;
//select what column you want to scrape (is zero based)
//in this case I would be scrapping column 2
setColumnToScrape=1;
var table = document.getElementsByTagName("tbody")[setTable];
for (var i = 0, row; row = table.rows[i]; i++) {
  col = row.cells[setColumnToScrape];
  document.write(col.innerHTML + "<br>");
}

這是使用childNodesHTMLCollection的不同方法

    <script>
        var tab = document.getElementsByTagName("table")
        for (var val of tab[0].childNodes[1].childNodes.values())
            if (HTMLCollection.prototype.isPrototypeOf(val.children)) {
                for (var i of val.children) {
                    console.log(i.childNodes[0])
                }
            }
    </script>

我的解決方案,使用 es6:

var table = document.getElementById('mytab1');

var data = [...table.rows].map(row => [...row.cells].map(td => td.innerText));

console.log(data)

參考:
https://developer.mozilla.org/pt-BR/docs/Web/API/HTMLCollection

純Javascript

 function numberofRow(){ var x = document.getElementById("mytab1").rows.length; document.getElementById("mytab1").innerHTML = x; } numberofRow();
 <div id="myTabDiv"> <table name="mytab" id="mytab1"> <tr> <td>col1 Val1</td> <td>col2 Val2</td> </tr> <tr> <td>col1 Val3</td> <td>col2 Val4</td> </tr> </table> </div>

es6:

const table = document.getElementById('some-table');
const cells = table.getElementsByTagName('td');

for (let cell of cells) {
   // do something with cell here
}

早期版本:

var table = document.getElementById('some-table');
var cells = table.getElementsByTagName('td');
for ( var i in cells ) {
   // do something with cells[i]
}

來源: https : //developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM