JavaScript'teki tablo satırları ve hücreleri arasında nasıl yineleme yapabilirim?

Bir HTML tablom varsa ...

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

Tüm tablo satırları arasında nasıl yineleyebilirim (her kontrol ettiğimde satır sayısının değişebileceğini varsayarak) ve JavaScript içinden her satırdaki her bir hücrenin değerlerini nasıl alabilirim?

Her satırı ( <tr>) bilmek, satırı ( ) bilmek / tanımlamak ve her satırın ( ) <tr>her sütununu ( <td>) yinelemek <tr>istiyorsanız, işte bu yol.

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>Hangi satırda olduğunuzu görmezden gelerek sadece hücrelerden ( ) geçmek istiyorsanız , işte bu yol.

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 kullanmayı düşünebilirsiniz. JQuery ile çok kolay ve şöyle görünebilir:

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

Her geçişte döngü r / c yineleyicisi artar ve koleksiyondaki yeni satır / hücre nesnesi satır / hücre değişkenlerine atanır. Koleksiyonda başka satır / hücre olmadığında, satır / hücre değişkenine false değeri atanır ve döngü dururken (çıkışlarda) yineleme yapılır.

Deneyin

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>

Bu çözüm benim için mükemmel çalıştı

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

İşlevsel bir stile sahip olmak istiyorsanız, şöyle:

    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'ın prototip nesnesini değiştirebilir (C # 'daki uzantı yöntemlerine benzeyen bir şekilde kullanılmasına izin verir) ve koleksiyona diziye dönüştürerek, yukarıdaki stille daha yüksek sıralı işlevler (linq stili C #):

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

Daha iyi bir çözüm: Javascript'in doğal özelliğini kullanın Array.from()ve HTMLCollection nesnesini bir diziye dönüştürün, ardından standart dizi işlevlerini kullanabilirsiniz.

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

Ayrıca referans olabilir tr.rowIndexve cell.colIndexkullanmak yerine row_indve col_ind.

Ben çok küresel değişkenlerle kodunuzu kalabalık etmez çünkü 2 cevaplar En yüksek oyu üstünden bu yaklaşım tercih i, j, rowve col, ve bu nedenle temiz, modüler herhangi bir yan etkisi olmaz kodunu verir (veya zam tiftiği / derleyici uyarılar) ... başka kütüphaneler olmadan (örn. jquery).

Bunun Javascript'in eski bir sürümünde (ES2015 öncesi) çalıştırılmasını istiyorsanız, çoklu doldurulabilir Array.from.

.querySelectorAll()Tüm tdöğeleri seçmek için düğmelerini kullanın ve ardından bunların üzerinde döngü yapın .forEach(). Değerleri şununla alınabilir .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>

Yalnızca belirli bir satırdaki sütunları seçmek istiyorsanız , isteğe bağlı olarak alt birleştirici ( ) ile birlikte ( tablo içinde bir tablonuz varsa yararlı olabilir ):nth-child() belirli bir sınıf seçmek için sözde sınıftan yararlanabilirsiniz :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>

Tek bir döngü kullanma:

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