javascript - 来自多个 JavaScript 数组的 HTML 表格

Question

我正在建立一个小型交互式网站供某些人使用。我已经 build 了很多，但我停留在这部分上。

有 4 个基于用户选择的数组，它们以空数组开始。当用户单击某个项目时，它的四个组件将分别添加到每个数组中，它们都是数字。

第 1 项:3,5,7,9

第 2 项:2,4,6,8

    var bgArray = [3,2]; 
    var minority = [5,4];
    var poverty = [7,6];
    var lep = [9,8];

我想要做的是从四个数组构建一个 HTML 表，并使其如下所示。基本上，每个数组的第 1 行为 [0]，第 2 行为 [1]，依此类推。我想不出办法让他们排队。 (运行代码片段查看表格)

<table>
<tr>
  <td>H1</td>
  <td>H2</td>
  <td>H3</td>
  <td>H4</td>

  </tr>
<tr>
  <td>3</td>
  <td>5</td>
  <td>7</td>
  <td>9</td>

  </tr>
<tr>
  <td>2</td>
  <td>4</td>
  <td>6</td>
  <td>8</td>
  </tr>
</table>

我计划让用户做出选择，然后单击按钮来生成表格。他们还可以取消选择某个项目并重新生成表格。

提前致谢。

Answer 1

Eric，此代码可能正是您所要求的。这将帮助您在单击按钮时使用数组的值绘制表格。

var bgArray = [3,2,1]; 
var minority = [5,4,3];
var poverty = [7,6,5];
var lep = [9,8,7];

$("button").on("click", function(e){
  e.preventDefault();
  
  // Get the length of one array
  var numRows = bgArray.length;
  
  // Clear the table (except first row)
  $("table tr:not(:first-child)").remove();
  
  // Add the rows
  for(var i = 0; i < numRows; i++){
    var newRow = $("<tr></tr>");
    newRow.append(createNewColData(bgArray[i]));
    newRow.append(createNewColData(minority[i]));
    newRow.append(createNewColData(poverty[i]));
    newRow.append(createNewColData(lep[i]));
    $("table").append(newRow);
  }  
});

// Auxiliar function to render a table data
function createNewColData(data){
  return "<td>" + data + "</td>";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Add values</button>
<br/>
<br/>
<table>
  <tr>
    <td>H1</td>
    <td>H2</td>
    <td>H3</td>
    <td>H4</td>
  </tr>
</table>

我不确定您的按钮显示将如何工作，但如果您更新标记，我可以更新我的答案。

祝你好运，编码愉快!