ฉันจะวนซ้ำแถวตารางและเซลล์ใน 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>) และวนซ้ำแต่ละคอลัมน์ ( <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
    })
})

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>

ในแต่ละ pass through ในขณะที่วนรอบ r / c iterator เพิ่มขึ้นและวัตถุแถว / เซลล์ใหม่จากคอลเลกชันถูกกำหนดให้กับตัวแปรแถว / เซลล์ เมื่อไม่มีการรวบรวมแถว / เซลล์อีกต่อไปจะมีการกำหนดค่า false ให้กับตัวแปรแถว / เซลล์และการวนซ้ำตลอดขณะที่ลูปหยุด (ออก)

ลอง

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("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 #) และฝังลงในฟังก์ชั่นที่แปลงคอลเลกชันเป็นอาร์เรย์ช่วยให้ใช้ funcions คำสั่งที่สูงขึ้นด้วยสไตล์ข้างต้น ค#):

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

วิธีแก้ปัญหาที่ดีกว่า: ใช้ native Javascript Array.from()และแปลง HTMLCollection object เป็น array หลังจากนั้นคุณสามารถใช้ฟังก์ชัน array มาตรฐานได้

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.rowIndexและcell.colIndexแทนที่จะใช้row_indและcol_indและ

ผมชอบมากวิธีนี้กว่าด้านบน 2 สูงสุดลงมติคำตอบเพราะมันไม่ได้ถ่วงรหัสของคุณกับตัวแปรทั่วโลกi, j, rowและcolและดังนั้นจึงมอบสะอาดรหัสโมดูลที่จะไม่ได้มีผลข้างเคียงใด ๆ (หรือเพิ่มผ้าสำลี / คำเตือนคอมไพเลอร์) ... ไม่มีห้องสมุดอื่น (เช่น jquery)

หากคุณต้องการให้สิ่งนี้ทำงานใน Javascript เวอร์ชันเก่า (pre-ES2015) เวอร์ชันเก่าArray.fromสามารถผสมได้

คุณสามารถใช้.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เลือกร่วมกับCombinator เด็ก ( >) (ซึ่งจะเป็นประโยชน์ถ้าคุณมีตารางที่อยู่ในตาราง):

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>

ใช้สำหรับวงเดียว:

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