Làm cách nào để lặp qua các hàng và ô trong JavaScript?

Nếu tôi có một bảng HTML ... hãy nói

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

Làm thế nào tôi lặp lại qua tất cả các hàng của bảng (giả sử số lượng hàng có thể thay đổi mỗi lần tôi kiểm tra) và truy xuất giá trị từ mỗi ô trong mỗi hàng từ trong JavaScript?

Nếu bạn muốn đi qua từng hàng (<tr> ), biết / xác định hàng ( <tr>) và lặp qua từng cột ( <td>) của mỗi hàng ( <tr>), thì đây là cách để đi.

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

Nếu bạn chỉ muốn đi qua các ô ( <td>), bỏ qua hàng nào bạn đang đi, thì đây là cách để đi.

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
}

Bạn có thể xem xét sử dụng jQuery. Với jQuery, nó cực dễ và có thể trông như thế này:

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

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>

Trong mỗi lần đi qua vòng lặp r / c iterator tăng và đối tượng hàng / ô mới từ bộ sưu tập được gán cho các biến hàng / ô. Khi không còn hàng / ô trong bộ sưu tập, false được gán cho biến hàng / ô và lặp qua vòng lặp while (thoát).

Thử

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>

Giải pháp này làm việc hoàn hảo cho tôi

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 = "";
     }
}

Nếu bạn muốn một cái có kiểu dáng chức năng, như thế này:

    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"]

Bạn có thể sửa đổi đối tượng nguyên mẫu của HTMLCollection (cho phép sử dụng theo cách tương tự với các phương thức mở rộng trong C #) và nhúng vào đó một hàm chuyển đổi bộ sưu tập thành mảng, cho phép sử dụng các hàm thứ tự cao hơn với kiểu trên (kiểu linq trong C #):

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

Giải pháp tốt hơn: sử dụng nguồn gốc của Javascript Array.from()và để chuyển đổi đối tượng HTMLCollection thành một mảng, sau đó bạn có thể sử dụng các hàm mảng tiêu chuẩn.

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

Bạn cũng có thể tham khảo tr.rowIndexvà cell.colIndexthay vì sử dụng row_indvà col_ind.

Tôi rất thích phương pháp này trên đầu 2 cao nhất bình chọn câu trả lời vì nó không lộn xộn mã của bạn với các biến toàn cục i, j, rowvà col, và do đó nó mang lại sạch, mã mô-đun đó sẽ không có bất kỳ tác dụng phụ (hoặc tăng lint / cảnh báo trình biên dịch) ... Không có các thư viện khác (ví dụ jquery).

Nếu bạn yêu cầu điều này để chạy trong một phiên bản cũ (trước ES2015) của Javascript, Array.fromcó thể được điền đầy đủ.

Bạn có thể sử dụng .querySelectorAll()để chọn tất cả các tdyếu tố, sau đó lặp lại những yếu tố này với .forEach(). Giá trị của chúng có thể được lấy bằng .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>

Nếu bạn muốn chỉ chọn các cột từ một hàng cụ thể, bạn có thể sử dụng lớp giả :nth-child()để chọn một cụ thể tr, tùy ý kết hợp với bộ kết hợp con ( >) (có thể hữu ích nếu bạn có một bảng trong bảng):

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>

Sử dụng một vòng lặp duy nhất:

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