Javascript 将新列标题映射到新添加的html表列

我试图实现的是允许用户在页面上生成一个表，允许用户创建新列，并允许列名显示并映射到同一列中的数据

目前，我能够构建该表，并且我有一个生成的表，该表将其列标题映射到一个选择框。我在这个页面上有一个刷新按钮，单击该按钮时，刷新选择框标题（以防用户创建新列）

当我刷新选择框时，会下拉正确的标题，但是应该随它们一起选择的数据不会被映射（我可以通过我的console.log语句看到这一点）这只在我创建列时发生。。列被追加到表中，但当我执行以下操作时

$('#dropHeader').change( function() {
    firstArray = [];
    console.log('First Select Box Changed');
    var table = document.getElementById("theTable");
    currentValue1 = ($(this).val());
    console.log(currentValue1);
    var elem1 = $("#theTable td:contains("+ currentValue1 +")");
    console.log(elem1);
    var index1 = elem1.index('#theTable td');
    console.log(index1);
    index1+=1;
    $("#theTable tr td:nth-child("+ index1 +")").each(function () {
        firstArray.push($(this).text());
    }); 
    firstArray.shift();

});

这仅适用于最初属于表一部分的列

我记录的console.log jQuery选择器语句可能会有所帮助：

正常选择器语句：

[td,prevObject: m.fn.init[1], context: document, selector: "#theTable td:contains(Header 2)"]

[prevObject: m.fn.init[1], context: document, selector: "#theTable td:contains(New Column↵)"]

列添加了选择器语句：

[td,prevObject: m.fn.init[1], context: document, selector: "#theTable td:contains(Header 2)"]

[prevObject: m.fn.init[1], context: document, selector: "#theTable td:contains(New Column↵)"]

我已经研究了一段时间了，我相信问题在于jQuery选择器语句。我注意到的一件事是jQuery选择器语句末尾的返回信号

---

任何帮助都将不胜感激！谢谢

“映射到同一列中的数据”。。。不清楚数据源是什么，或者新列的数据是否已经存在。沙盒环境演示真的会有帮助吗？它可能是未来元素上的JQuery函数（在注册时不存在）？只要插入的元素位于绑定事件的元素内，它就可以工作。如果创建