Bagaimana cara saya mengulangi baris dan sel tabel dalam JavaScript?

Jika saya memiliki tabel HTML ... katakanlah

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

Bagaimana saya mengulangi semua baris tabel (dengan asumsi jumlah baris bisa berubah setiap kali saya periksa) dan mengambil nilai dari setiap sel di setiap baris dari dalam JavaScript?

Jika Anda ingin melewati setiap baris ( <tr>), mengetahui / mengidentifikasi baris ( <tr>), dan beralih melalui setiap kolom ( <td>) dari setiap baris ( <tr>), maka ini adalah cara untuk pergi.

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

Jika Anda hanya ingin menelusuri sel ( <td>), mengabaikan baris mana yang Anda gunakan , maka inilah cara yang harus ditempuh.

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
}

Anda dapat mempertimbangkan menggunakan jQuery. Dengan jQuery itu sangat mudah dan mungkin terlihat seperti ini:

$('#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>

Dalam setiap melewati sementara loop r / c iterator meningkat dan objek baris / sel baru dari koleksi ditugaskan ke variabel baris / sel. Ketika tidak ada lagi baris / sel dalam koleksi, false ditugaskan untuk variabel baris / sel dan iterasi melalui sementara loop berhenti (keluar).

Mencoba

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>

Solusi ini bekerja dengan sempurna untuk saya

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

Jika Anda menginginkannya dengan gaya fungsional, seperti ini:

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

Anda dapat memodifikasi objek prototipe HTMLCollection (memungkinkan untuk digunakan dengan cara yang menyerupai metode ekstensi dalam C #) dan menanamkan ke dalamnya fungsi yang mengubah koleksi menjadi array, memungkinkan untuk menggunakan fungsi urutan yang lebih tinggi dengan gaya di atas (jenis gaya linq di C #):

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

Solusi yang lebih baik: gunakan asli Javascript Array.from()dan untuk mengkonversi objek HTMLCollection ke array, setelah itu Anda dapat menggunakan fungsi array standar.

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

Anda juga bisa referensi tr.rowIndexdan cell.colIndexbukannya menggunakan row_inddan col_ind.

Saya lebih memilih pendekatan ini dari atas 2 tertinggi sebagai jawaban karena tidak kekacauan kode Anda dengan variabel global i, j, rowdan col, dan oleh karena itu memberikan bersih kode, modular yang tidak akan memiliki efek samping (atau kenaikan serat / peringatan compiler) ... tanpa perpustakaan lain (mis. jquery).

Jika Anda memerlukan ini untuk dijalankan dalam Javascript versi lama (pra-ES2015), Array.fromdapat diisi polif.

Anda dapat menggunakan .querySelectorAll()untuk memilih semua tdelemen, lalu mengulanginya dengan .forEach(). Nilai-nilainya dapat diambil dengan .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>

Jika Anda hanya ingin memilih kolom dari baris tertentu, Anda dapat menggunakan pseudo-class :nth-child()untuk memilih yang spesifik tr, secara opsional bersamaan dengan child combinator ( >) (yang dapat berguna jika Anda memiliki tabel di dalam tabel):

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>

Menggunakan satu untuk loop:

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