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

I need to generate a two-headed table that draws data from three different arrays - riders, passes, and prices. Riders (column header) and Passes (row header) are both headers. Prices are where the Riders and Passes intersect.

So something like this: https://www.w3.org/WAI/tutorials/tables/two-headers/

Here's where I've been successful:

1. Table is generated with the correct number of rows/cols based on length of the arrays
2. The cells are being autofilled with elements from each array.

Here's where I'm struggling:

1. The header (passes) is only showing the first element in the array over and over again for each cell in the top row.
2. Second row is displaying only the first element of the rider array over and over again in each cell.
3. The rest of the cells are populated with prices, but they span the entire row. So instead of seeing $1.00, $2.00, $3.00 it's a row of $1.00 and then the row immediately under it is $2.00, etc.

My questions: 1. How can I make sure the rider array populates only the first column?

2. How do I iterate over two of the loops so that I get more than just the first value? How do I make sure each cell has only one value?

   <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");
    }
   

You seem to be missing the values for one of the columns. The following code is with the data you provided. If you can provide other data and if the requirement is different I can maybe improve it afterwards.

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>

</div>