来自多个JavaScript数组的HTML表

Question

我正在建立一个供某些人使用的交互式小网站。 我有很多内置的，但都停留在这部分上。

有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

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

 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 2

埃里克（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 3

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

香草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>