如何在JavaScript中按左下到右规则映射值填充表格（含自定义变量）

Hey there! Let's figure out how to map your numeric values to table cells and get that specific reading order you need. First, let's break down your example to understand the pattern clearly:

Step 1: Understand the Core Pattern #

Given N=10, I=2, M=20, your full sequence of numbers is [10, 12, 14, 16, 18, 20]. The desired reading order (from bottom-left to right, then up a row to right) gives 16 18 20 10 12 14.

This means your table structure should be 2 rows × 3 columns, where:

• The top row holds the first half of the sequence: 10, 12, 14
• The bottom row holds the second half: 16, 18, 20

When reading from the bottom-left (16) and moving right, then up to the top row's left, you get exactly your target sequence.

Step 2: Ditch the Object Array Dependency #

The code you referenced uses objects with name, price, etc., but you don't need that—we can work directly with your numeric sequence. Here's a simplified implementation:

// Define your parameters
const N = 10;
const I = 2;
const M = 20;
const columnCount = 3; // Match your example's column count (adjust as needed)

// 1. Generate the full sequence of numbers
const generateNumberSequence = (start, step, max) => {
  const sequence = [];
  for (let num = start; num <= max; num += step) {
    sequence.push(num);
  }
  return sequence;
};

const numberSequence = generateNumberSequence(N, I, M);

// 2. Calculate how many rows we need
const rowCount = Math.ceil(numberSequence.length / columnCount);

// 3. Split the sequence into rows (top row first, then bottom rows)
const tableRows = [];
for (let i = 0; i < rowCount; i++) {
  const startIndex = i * columnCount;
  const endIndex = startIndex + columnCount;
  tableRows.push(numberSequence.slice(startIndex, endIndex));
}

// 4. Generate the HTML table
const buildTable = (rows) => {
  let tableHtml = '<table border="1">'; // Border added for visibility
  rows.forEach(row => {
    tableHtml += '<tr>';
    row.forEach(cellValue => {
      tableHtml += `<td>${cellValue}</td>`;
    });
    tableHtml += '</tr>';
  });
  tableHtml += '</table>';
  return tableHtml;
};

// Render the table to the page
document.body.innerHTML = buildTable(tableRows);

How This Works #

• Sequence Generation: We loop from N to M, adding I each time to build your full list of numbers.
• Row Calculation: Divide the total number of values by your desired column count to get how many rows are needed.
• Row Splitting: We slice the sequence into chunks matching your column count—this creates the top row first, then subsequent rows (which will appear lower in the table).
• Table Rendering: We convert the row data into HTML, where the first <tr> becomes the top row of the table, and the last <tr> becomes the bottom row (so the bottom-left cell is the first value of the last row).

Customization Tips #

• If you need a different number of columns, just change the columnCount variable—this will automatically adjust the number of rows.
• If your sequence doesn't divide evenly into columns, the code will add a partial row at the bottom with empty cells (you can tweak this to fill with placeholder values if needed).

内容的提问来源于stack exchange，提问作者jenryb