如何在JavaScript中遍历表格行和单元格?

2020/10/18 14:01 · javascript ·  · 0评论

如果我有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
   }  
}

如果您只是想遍历cells(<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>

在每次遍历while循环中,循环r / c迭代器都会增加,并且来自集合的新行/单元对象将分配给行/单元变量。当集合中没有更多的行/单元时,将false分配给行/单元变量,并在while循环停止(退出)时进行迭代。

尝试

for (let row of mytab1.rows) 
{
    for(let cell of row.cells) 
    {
       let val = cell.innerText; // your code below
    }
}

更好的解决方案:使用Javascript的本机Array.from()并将HTMLCollection对象转换为数组,然后可以使用标准数组函数。

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.rowIndexcell.colIndex而不是使用row_indcol_ind

我更喜欢这种方法在上面2最高投票的答案,因为它不具有全局变量搞乱你的代码ijrowcol,因此它提供了清晰的,模块化的代码,不会有任何的副作用(或提高皮棉/编译器警告) ...没有其他库(例如jquery)。

如果您要求它在Javascript的旧版本(ES2015之前)中运行,则Array.from可以进行多填充

该解决方案对我来说非常有效

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#中的扩展方法的方式使用),并在其中嵌入一个将集合转换为数组的函数,从而允许使用具有上述样式(例如linq样式)的高阶函数。 C#):

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

您可以.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,还可以选择子组合器(>结合使用(如果表中有表,则很有用):

使用单个for循环:

var table = document.getElementById('tableID');  
var count = table.rows.length;  
for(var i=0; i<count; i++) {    
    console.log(table.rows[i]);    
}
本文地址:http://javascript.askforanswer.com/ruhezaijavascriptzhongbianlibiaogexinghedanyuange.html
文章标签:
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!