如果前一个单元格具有值 HandsOnTable，如何将单元格更改为非活动状态

Question

I'm new to JavaScript. I creating a table with cells where we can add values and I'm using HandsOnTable. I need to create an inactive cell and we can't set the value in the inactive cell in HandsOnTable if the previous cell has a value.

It's my code:

<div id="downtimetable"></div>

<script script type="text/javascript" th:inline="javascript">
    let dataFromSpringDown = [[${downtimes}]];
    let dataObjDown = [];
    let temp1 = {
                        name: ' ',
                        town: ' ',
                        tent: ' ',
                        izoterm: ' ',
                        ref: ' '
    }
    for(let obj of dataFromSpringDown){
        let object = {
                        name: obj["name"],
                        town: obj["town"],
                        tent: obj["tent"],
                        izoterm: obj["izoterm"],
                        ref: obj["ref"]
                    };
    dataObjDown.push(object);
    }
    dataObjDown.push(temp);

        let container2 = document.getElementById('downtimetable');
        let hot2 = new Handsontable(container2, {
          data: dataObjDown,
          rowHeaders: true,
          colHeaders: true,
           autoWrapRow: true,
            colHeaders: [
    'Name',
    'Town',
    'Cost'
  ],
          manualRowMove: true,
          manualColumnMove: true,
          contextMenu: true,
          filters: true,
          dropdownMenu: true,
          collapsibleColumns: true,
          nestedHeaders : [
          [
           'Name',
            'Town',
            {
            label: 'Cost',
            colspan: 3
            }
           ],
           [
           '','','Tent','Izo','Ref'
           ]
           ],
           manualColumnResize : true
        });

        function myFunctionDown() {
            var json = JSON.stringify(dataObjDown);
            var xhr = new XMLHttpRequest();
            xhr.open("POST","/downtime_rows_json");
            xhr.setRequestHeader("Content-Type","application/json");
            xhr.send(json);
        }

    </script>

<button onclick="myFunctionDown()" class="btn btn-info">From table</button>

It's a table created with script:

I need to change the status to inactive in cell2 if cell1 has a value and vice versa. How I can do that?

I think we can use this script, but I don't understand how get the previous cell

 hot2.updateSettings({
    cells: function (row, col, prop) {
      var cellProperties = {};
  
      if (hot2.getDataAtRowProp(row, prop) === 'Town1') {
        cellProperties.editor = false;
      } else {
        cellProperties.editor = 'text';
      }
  
      return cellProperties;
    }
  })

Answer 1

The code below will disable cell 2 and delete its value if cell 1 has a value and vice versa. In other words: you can't have values in both column 1 and 2.

hot2.addHook( 'afterChange', function( changes, src ) {
  [
    [row, prop, oldVal, newVal] 
  ] = changes;
  if ( prop == 0 && hot2.getDataAtRowProp( row, prop + 1 ) && newVal?.length > 0 ) {
    // delete value of cell 2 if cell 1 has a value
    hot2.setDataAtCell( row, prop + 1, '' );
  } else if ( prop == 1 && hot.getDataAtRowProp( row, prop - 1 ) && newVal?.length > 0 ) {
    // delete value of cell 1 if cell 2 has a value
    hot2.setDataAtCell( row, prop -1, '' );
  }
})


hot2.updateSettings( {
   cells: function ( row, col, prop ) {
     cellProperties = {};

     if ( prop == 1 && hot2.getDataAtRowProp( row, prop - 1 ) ) {
       // this disables cell 2 if cell 1 has a value
       cellProperties.readOnly = true;
     } else if ( prop == 0 && hot2.getDataAtRowProp( row, prop + 1 ) ) {
       // this disables cell 1 if cell 2 has a value
       cellProperties.readOnly = true;
     } else {
       cellProperties.readOnly = false;
     }
     return cellProperties;
   }
})

Answer 2

It's working for me:

hot1.addHook('beforeRenderer', function(td, row, col, prop, value, cellProperties) {
            if (prop === 'name') {
               var cellMeta = this.getCellMeta(row, this.propToCol('town'));
               cellMeta.readOnly = (value != ' ' && value != '' && value != null) ? true : false;
           } if (prop === 'town') {
                var cellMeta = this.getCellMeta(row, this.propToCol('name'));
             cellMeta.readOnly = (value != ' ' && value != '' && value != null) ? true : false;
          } 
      });

You can change the columns name, and it's will still working