JavaScript实现表格指定单元格添加年龄总和的方法求助

我通过JS代码生成了包含Name、Index、Age列的表格，希望在Age列单元格下方显示年龄总和。目前已能添加新行，但不知道如何将结果放置到指定的单元格位置。

当前实现代码 #

let names = ["X", "Y"]
let ages = [22, 10]

const newTable = document.createElement("table");
newTable.innerHTML = "<thead><th>Name</th><th>Index</th><th>Age</th></thead>";
let index = []
for (let j =0 ; j< names.length; j++)
index.push(j+1)

if (names.length == ages.length) {
  for (let i = 0; i < names.length; i++) {
    
    let newRow = document.createElement("tr");
    //name
    const tdName = document.createElement("td");
    tdName.textContent = names[i];
    newRow.appendChild(tdName);
    
    // index 
    let tdIndex= document.createElement("td");
    tdIndex.textContent = index[i];
    newRow.appendChild(tdIndex);

    //age
    const tdAge = document.createElement("td");
    tdAge.textContent = String(ages[i]);
    newRow.appendChild(tdAge);
    newTable.appendChild(newRow);
  }
}
const target = document.getElementById('target');
target.appendChild(newTable);

HTML结构 #

<div id="target"></div>

尝试的代码（未达预期） #

let tdSum= document.createElement("td") 
tdSum.textContent = "Sum age" 
let newRow2 = document.createElement("tr"); 
newRow2.appendChild(tdSum) 
newTable.appendChild(newRow2)

要让年龄总和显示在Age列正下方，有两种常用实现方式：

方式1：使用colspan合并前两列 #

通过设置单元格的colspan属性，让总和行的第一个单元格占据前两列的位置，既美观又符合布局逻辑：

// 计算年龄总和
const totalAge = ages.reduce((sum, age) => sum + age, 0);

// 创建总和行
const sumRow = document.createElement("tr");

// 合并前两列的单元格，可自定义显示文本
const mergeCell = document.createElement("td");
mergeCell.colSpan = 2;
mergeCell.textContent = "年龄总和"; // 可根据需求修改或留空
sumRow.appendChild(mergeCell);

// 添加总和单元格
const sumCell = document.createElement("td");
sumCell.textContent = totalAge;
sumRow.appendChild(sumCell);

// 将总和行添加到表格
newTable.appendChild(sumRow);

方式2：添加空单元格占位 #

如果不需要合并列，直接给总和行添加两个空单元格对应Name和Index列，确保总和单元格落在Age列下方：

// 计算年龄总和
const totalAge = ages.reduce((sum, age) => sum + age, 0);

// 创建总和行
const sumRow = document.createElement("tr");

// 添加两个空单元格占位
sumRow.appendChild(document.createElement("td"));
sumRow.appendChild(document.createElement("td"));

// 添加总和单元格
const sumCell = document.createElement("td");
sumCell.textContent = totalAge;
sumRow.appendChild(sumCell);

// 将总和行添加到表格
newTable.appendChild(sumRow);

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