Question

来自多个 JavaScript 数组的 HTML 表

2016-10-25

80

javascript jquery html arrays

我正在为某些人建立一个小型交互式网站。我已经建立了许多网站，但在这一部分上遇到了困难。

有 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>

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

祝您好运，编码愉快！

Answer 2

您可以迭代数组（考虑到四个矩阵的长度相同）并构建表格的行：

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

var lines = "";
for (let i = 0 ; i < bgArray.length ; i++){
      lines += "<tr>"  
      lines += "<td>" + bgArray[i] + "</td>"      
      lines += "<td>" + minority[i] + "</td>" 
      lines += "<td>" + poverty[i] + "</td>" 
      lines += "<td>" + lep[i] + "</td>" 
      lines += "</tr>"
}

$("table").append(lines);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <th>H1</th>
    <th>H2</th>
    <th>H3</th>
    <th>H4</th>
  </tr>

</table>

Answer 3

您无需使用任何 javascript 库即可实现此目的。

Vanilla Javascript 即可实现

HTML

<table border="1">
  <tr>
    <th>H1</th>
    <th>H2</th>
    <th>H3</th>
    <th>H4</th>
  </tr>

</table>

JavaScript

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

var row = "";
for (var i = 0 ; i < bgArray.length ; i++){
      row += "<tr>" ; 
      row += "<td>" + bgArray[i] + "</td>"  ;    
      row += "<td>" + minority[i] + "</td>" ;
      row += "<td>" + poverty[i] + "</td>" ;
      row += "<td>" + lep[i] + "</td>" ;
      row += "</tr>";
}

var t = document.querySelector('table');

t.innerHTML = t.innerHTML + row;

JSFiddle 在这里

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

var row = "";
for (var i = 0 ; i < bgArray.length ; i++){
      row += "<tr>" ; 
      row += "<td>" + bgArray[i] + "</td>"  ;    
      row += "<td>" + minority[i] + "</td>" ;
      row += "<td>" + poverty[i] + "</td>" ;
      row += "<td>" + lep[i] + "</td>" ;
      row += "</tr>";
}

var t = document.querySelector('table');

t.innerHTML = t.innerHTML + row;

<table border="1">
  <tr>
    <th>H1</th>
    <th>H2</th>
    <th>H3</th>
    <th>H4</th>
  </tr>

</table>