首頁(yè) 猿問(wèn) 請(qǐng)問(wèn)如何在JavaScript中迭...

請(qǐng)問(wèn)如何在JavaScript中迭代表行和單元格？

JavaScript

慕田峪9158850 2019-08-02 07:02:57

如何在JavaScript中迭代表行和單元格？如果我有一個(gè)HTML表.比如說(shuō)<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>我將如何迭代所有表行(假設(shè)每次檢查時(shí)行數(shù)都會(huì)改變)，并從JavaScript中的每行單元格中檢索值？

查看完整描述

3 回答

慕無(wú)忌1623718

TA貢獻(xiàn)1744條經(jīng)驗(yàn) 獲得超4個(gè)贊

如果您想通過(guò)每一行(<tr>)，知道/識(shí)別行(<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
   }  }

如果你只想穿過(guò)牢房<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}

反對(duì) 回復(fù) 2019-08-03

www說(shuō)

TA貢獻(xiàn)1775條經(jīng)驗(yàn) 獲得超8個(gè)贊

您可以考慮使用jQuery。使用jQuery，它非常簡(jiǎn)單，看起來(lái)可能如下所示：

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

反對(duì) 回復(fù) 2019-08-03

慕婉清6462132

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超2個(gè)贊

var table=document.getElementById("mytab1");var r=0;while(row=table.rows[r++]){
  var c=0;
  while(cell=row.cells[c++])
  {
    cell.innerHTML='[Row='+r+',Col='+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>

在每次遍歷過(guò)程中，循環(huán)r/c迭代器增加，集合中的新行/單元格被分配給行/單元變量。當(dāng)集合中沒(méi)有更多的行/單元時(shí)，false被分配給行/單元格和迭代，然后循環(huán)停止(退出)。

反對(duì) 回復(fù) 2019-08-03