操纵表格单元格

Question

我有一个看起来像这样的对象：

{1: "Manchester", 2: "London", 3: "Bristol", 4: "Birmingham", 5: "Liverpool", 6: "Newcastle", 7: "York", 8: "Edinburgh", 9: "Glasgow", 10: "Aberdeen"}

我正在使用此对象在名为“city”的列中的表格的单元格中创建选择列表。当此值发生更改时，我想使用对象中的键（等于id）更新名为“id”的列中另一个单元格的值。

有没有办法可以将一个单元格中的更改与另一个单元格绑定。我正在努力解决这个问题。

我应该提到的一点是，这是一个基本用例，实际上值和键可以是任何东西，所以我需要一种动态的方法来选择相应的列，以便在select字段中的值更改时进行更新。 / p>

非常感谢任何帮助。

感谢您的时间。

更新：

我使用名为Ag-Grid的数据网格组件来生成表格，然后我创建我的选择字段：

function customEditor(params) {
    let editing = false;
    let setSelectionOptions = TableStore.getTable().lookups[0].map;

    let eCell = document.createElement('span');
    let eLabel = document.createTextNode(params.value);
    eCell.appendChild(eLabel);

    let eSelect = document.createElement('select');

    Object.keys(setSelectionOptions).forEach(key => {
        let eOption = document.createElement('option');
        eOption.setAttribute('value', setSelectionOptions[key]);
        eOption.innerHTML = setSelectionOptions[key];
        eSelect.appendChild(eOption);
    }); 
    eSelect.value = params.value;

    eCell.addEventListener('click', () => {
        if (!editing) {
            eCell.removeChild(eLabel);
            eCell.appendChild(eSelect);
            eSelect.focus();
            editing = true;
        }
    });

    eSelect.addEventListener('blur', () => {
        if (editing) {
            editing = false;
            eCell.removeChild(eSelect);
            eCell.appendChild(eLabel);
        }
    });

    eSelect.addEventListener('change', () => {
        if (editing) {
            editing = false;
            let newValue = eSelect.value;
            params.data[params.colDef.field] = newValue;
            eLabel.nodeValue = newValue;
            eCell.removeChild(eSelect);
            eCell.appendChild(eLabel);
        }
    });

    return eCell;
}

其中params由网格功能提供，在这种情况下用于设置新值进入单元格，setSelectionOptions是我之前提到的对象。我现在需要做的是选择其他相关列并将其中的值更改为正确的对应值。