时间戳

首页 > 解决方案 > 如何使用同一函数中的值创建表格并将值设置为表格单元格

javascript - 如何使用同一函数中的值创建表格并将值设置为表格单元格

问题描述

这段代码是在 HTML 文件的一个弹出菜单中创建 3 个数组，其中的值是从用户输入中提取的，但此处的值需要填写下表。

var arrM = new Array;      var arrT = new Array;         var arrA = new Array; 
arrM[0] = mod0.mod.value;  arrT[0] = mod0.target.value;  arrA[0] = mod0.actual.value; 
arrM[1] = mod1.mod.value;  arrT[1] = mod1.target.value;  arrA[1] = mod1.actual.value; 
arrM[2] = mod2.mod.value;  arrT[2] = mod2.target.value;  arrA[2] = mod2.actual.value; 
arrM[3] = mod3.mod.value;  arrT[3] = mod3.target.value;  arrA[3] = mod3.actual.value; 
arrM[4] = mod4.mod.value;  arrT[4] = mod4.target.value;  arrA[4] = mod4.actual.value; 
arrM[5] = mod5.mod.value;  arrT[5] = mod5.target.value;  arrA[5] = mod5.actual.value; 
arrM[6] = mod6.mod.value;  arrT[6] = mod6.target.value;  arrA[6] = mod6.actual.value; 
arrM[7] = mod7.mod.value;  arrT[7] = mod7.target.value;  arrA[7] = mod7.actual.value; 
arrM[8] = mod8.mod.value;  arrT[8] = mod8.target.value;  arrA[8] = mod8.actual.value; 
arrM[9] = mod9.mod.value;  arrT[9] = mod9.target.value;  arrA[9] = mod9.actual.value;

上面的块和下面的块之间的代码（这里没有显示）只是计算平均值，不与下面的块交互

下面的代码是创建一个行数与用户在弹出菜单中填写的行数相同的表。

var tableGenerator = document.getElementById("tableGenerator");
tbl = document.createElement('table');
tbl.style.width = '500px';
tbl.style.height = '100px';
tbl.style.border = '1px solid black';
tbl.style.margin = '50px';
tbl.style.float = 'left';
if (j < 6) {
    j = 6;
}
for (var a = 0; a < j+1; a++) {
    var tr = tbl.insertRow();
    for (var b = 0; b < 3; b++) {
        if (a == j && b == 3) {
            break;
        } else {
            var td = tr.insertCell();
            td.appendChild(document.createTextNode(""));
            td.style.border = '1px solid black';
            if (a == 0 && b == 0) {
                var newtext = document.createTextNode(Text);
                var celltext = "Year   " + year.value + "  Semester   " + semester.value;
                td.appendChild(document.createTextNode(celltext));
                td.setAttribute('colSpan', '3'); break;
            }
//this else block below here obviously doesn't work, but this idea is there and I want something that 
//works like the pseudo code below
              else {
                for (a = 1; a < j; a++) {
                    tbl[a][0] = arrM[a];
                    tbl[a][1] = arrT[a];
                    tbl[a][2] = arrA[a];
                }
            }
        }
    }
 }tableGenerator.appendChild(tbl);

我对 HTML/JS/CSS 非常陌生，我们是否可以像访问数组一样访问表格的单元格值？还是有更好的方法来做到这一点？

标签： javascripthtml-table

解决方案

在 JavaScript 中，您需要创建文本节点并分配该节点的内容，或者将内容分配给textContent、innerText或innerHTML属性以赋予表格单元格的值。

td.textContent = 'Hello'; // This is the preferred property for text.

为了帮助您实现这一点，明智的做法是以一种可以循环的方式构建数据，因为您基本上是以特定的顺序做同样的事情。例如：

var data = [
  arrM,
  arrT,
  arrA
];

这会将您的数组放在另一个数组中。现在您可以遍历data数组并为每个数组创建一个表格行，并为嵌套数组中的每个项目创建一个表格单元格。

for (var i = 0; i < data.length; i++) {
  // ... create table row.
  for (var j = 0; j < data[i].length; j++) {
    // ... create table cell and assign textContent property.
  }
}

检查下面的示例。这是我上面解释的东西的可运行版本。我希望它可以帮助你。

function createTable(headers, values) {
  var table = document.createElement('table');
  
  // Build <thead>
  var tableHeader = table.createTHead();
  
  // Create <tr> inside <thead>
  var tableHeaderRow = tableHeader.insertRow();
  for (var i = 0; i < headers.length; i++) {
    // Create <th>
    var tableHeaderCell = document.createElement('th');
    
    // Set text of <th> to value in array.
    tableHeaderCell.textContent = headers[i];
    
    // Add <th> to <tr> inside <thead>
    tableHeaderRow.appendChild(tableHeaderCell);
  }

  // Build <tbody>
  var tableBody = table.createTBody();
  for (var j = 0; j < values.length; j++) {
    // Create <tr> inside <tbody>
    var tableBodyRow = tableBody.insertRow();

    for (var k = 0; k < values[j].length; k++) {
      // Create <td> inside <tr>
      var tableBodyCell = tableBodyRow.insertCell();
      
      // Set text of <td> to value in array.
      tableBodyCell.textContent = values[j][k];
    }
  }

  // Add <table> to the <body>
  document.body.appendChild(table);
}

var titles = [
  'One',
  'Two',
  'Three'
];

var characters = [
  ['Batman', 'Robin', 'Batgirl'],
  ['Joker', 'Two-Face', 'Poison Ivy'],
  ['James Gordon', 'Alfred Pennyworth', 'Clayface']
];

createTable(titles, characters);

推荐阅读