使用while循环创建表格行js

简介

在HTML中，我们可以通过<table>标签创建表格，而JavaScript则提供了一些方法来操作和创建表格。其中，使用while循环创建表格行是一种常用的方法，通过动态创建表格行，我们可以根据需要在表格中添加或删除行，使数据呈现更加灵活。

代码实现

以下是使用while循环创建表格行的基本代码：

// 获取表格对象
var table = document.getElementById("myTable");

// 获取表格行数
var rows = table.rows.length;

// 新建一行
var row = table.insertRow(rows);

// 创建单元格并添加到新建的行中
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);

// 向单元格中添加内容
cell1.innerHTML = "第一列";
cell2.innerHTML = "第二列";

在上述代码中，我们首先获取了一个表格对象myTable，并获取了该表格中已存在的行数rows，接着，我们新建了一行并将其添加到表格中，然后再为新建的行创建单元格，并通过innerHTML向单元格中添加内容。

如果需要添加多行，我们可以通过在while循环中重复以上代码来动态创建多行：

var table = document.getElementById("myTable");

var i = 0;
while (i < 10) {
  var row = table.insertRow(i);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  cell1.innerHTML = "第一列";
  cell2.innerHTML = "第二列";
  i++;
}

在上述代码中，我们使用while循环来控制行数的创建，该循环将创建10行，并向每一行中添加两个单元格，并在单元格中分别添加了“第一列”和“第二列”的内容。

总结

使用while循环创建表格行是一种常用的方法，通过该方法可以动态地创建表格行并向其添加内容，使得表格数据更加灵活和可扩展。最终我们可以让HTML页面依据特定的条件展现不同的数据。