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

Question

我需要生成一个双头表，从三个不同的数组中提取数据 - 乘客、通行证和价格。 Riders(列标题)和 Passes(行标题)都是标题。价格是乘客和通行证相交的地方。

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

这是我成功的地方:

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

这是我挣扎的地方:

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

我的问题:1. 如何确保 rider 数组仅填充第一列？

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

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