如何使用JavaScript在表格指定列前插入新列

[操作界面示意图]

需求说明 #

• 项目中已实现通过select标签获取列索引的能力，select的选项是根据从表格表头行提取的数组动态生成的。
• 目前已有代码的实现逻辑是：触发新增列操作时，直接在表格最后一列的后方插入新列；当select的选中项发生变化时，可以获取到对应的列索引值。
• 需要调整代码逻辑，实现在用户指定的列索引对应的位置之后插入新列。

现有代码 #

页面结构（HTML）

<button id="add-i-tableID">Add test table</button>
<button id="add-i-colID">Add column</button>

<div id="i_tableID" ></div>

交互逻辑（JavaScript）

var arrHead = new Array(); // 存储表头信息的数组
document.getElementById("add-i-tableID").addEventListener("click", function(){
    arrHead = [ 'Customer', 'Article', 'Amount'];
  
    var empTable = document.createElement('table');
    empTable.setAttribute('id', 'empTable'); // 设置表格id

    var tr = empTable.insertRow(-1);
    for (var h = 0; h < arrHead.length; h++) {
        var th = document.createElement('th'); // 创建表头单元格
        th.innerHTML = arrHead[h];
        th.style.border= '1px solid ';
        tr.appendChild(th);
    }

    var div_table = document.getElementById('i_tableID');
    div_table.appendChild(empTable);  // 将表格添加到页面容器中
   
});

var selectedIndexT = 0;
document.getElementById("add-i-colID").addEventListener("click", function() {
  var th = document.createElement('th'); // 创建新列的表头
  var colname1 = prompt("Please enter name of  the column");
  th.innerHTML = colname1;
  th.style.border = '1px solid';

  var xcvbn = document.getElementById('empTable');
  var xcvbnR = xcvbn.getElementsByTagName("tr");
  xcvbnR[0].appendChild(th);

  for (i = 1; i < xcvbnR.length; i++) {
    var td = document.createElement('td');
    var ele1 = document.createElement('input');
    ele1.setAttribute('type', 'text');
    ele1.setAttribute('value', '');
    ele1.style.color = "#8dbeb6";
    td.appendChild(ele1);
    xcvbnR[i].appendChild(td);
  }
});

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