创建一个双头动态表，其中填充了从 golang 服务器中提取的三个不同数组中的元素

Question

我需要生成一个双向表，该表从三个不同的数组中提取数据 - 骑手，通行证和价格。骑手(列标题)和通行证(行标题)都是标题。价格是骑手和通行证的交叉点。

所以像这样：https://www.w3.org/WAI/tutorials/tables/two-headers/

这是我成功的地方：

根据

1. 数组的长度使用正确的行/列数生成表
2. 单元格正在用每个数组中的元素自动填充。

这就是我挣扎的地方：

1. 标题(传递)仅针对顶行中的每个单元格一遍又一遍地显示数组中的第一个元素。
2. 第二行在每个单元格中一遍又一遍地仅显示骑手数组的第一个元素。
其余
3. 单元格填充了价格，但它们跨越整行。因此，不是看到 $1.00、$2.00、$3.00，而是一行 $1.00，然后紧靠它的行是 $2.00，依此类推。

我的问题： 1. 如何确保骑手数组仅填充第一列？

2. 如何遍历两个循环，以便获得的不仅仅是第一个值？如何确保每个单元格只有一个值？

   <script>
   function createTable(){
   mytable = $('<table></table>').attr({ id: 
   "basicTable",class:"table table-hover"});
   let pass =['one ride', 'one ride', 'two ride', 'two ride', 'week', 'week', 'month', 'month']
   console.log(pass[0]);
   let rider = [ 'regular', 'reduced']
   console.log(rider[0]);
   let price = ['1.00', '2.00', '3.00', '4.00', '5.00', '6.00', '7.00', '8.00']
   ];
   console.log(price[0]);
   let rows = price.length;
   console.log(rows);
   let cols = rider.length
   console.log(cols);
   var tr = [];
   for (var i = 0; i <= rows; i++) {
   var row = $('<tr></tr>').attr({ class: ["class1"].join(' ') 
   }).appendTo(mytable);
   console.log(row)
   if (i==0) {
   for (var j = 0; j < cols; j++) {
   $('<th scope="col"></th>').text(pass[i]).attr({class:
   ["info"]}).appendTo(row);
   }
   }else if (i==1) {
   for (var j = 0; j < cols; j++) {
   $('<td scope="col"></td>').text(rider[i]).appendTo(row);   
   }
   } else{
   for (var j = 0; j < cols; j++) {
   $('<td scope="row"></td>').text(price[i]).appendTo(row); 
   }}}
   mytable.appendTo("#box");
   }
   

Answer 1

您似乎缺少其中一列的值。 以下代码包含您提供的数据。如果您可以提供其他数据，并且要求不同，我可能会在之后对其进行改进。

let mytable = $('<table></table>').attr({
id: "basicTable",
class: "table table-hover"
});
const columnHeaders = ['one ride', 'one ride', 'two ride', 'two ride', 'week', 'week', 'month', 'month']
const rowHeaders = ['regular', 'reduced']
const rowValues = [['1.00', '2.00', '3.00', '4.00', '5.00', '6.00', '7.00', '8.00']]
//The above two dimensional array should map to the length of rows and columns, then the following code will not fail.

mytable.append(getTabelHTML(columnHeaders,rowHeaders,rowValues));
mytable.appendTo("#box");
function getTabelHTML(columnHeaders,rowHeaders, rowValues) {
//create col header html
const colheaderValue = ['', ...columnHeaders] //put one empty value for first empty column 
.map((header) => `<th scope="col">${header}</th>`)
.join(''); //join all the <th> strings

const colheaderRowHTML = `<tr>${colheaderValue}</tr>`; //wrap inside <TR>

//create other row HTML
const otherRowsHTML = rowHeaders.map((header, index) => {
let rowHeader = `<th scope="col">${header}</th>`
let rowValue = ''
if(rowValues[index]) {
rowValue = rowValues[index].map((rowcolValue)=>`<td scope="row">${rowcolValue}</td>`).join();
}
return `<tr>${rowHeader}${rowValue}</tr>`;
});
return colheaderRowHTML.concat(otherRowsHTML);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box"></div>