Javascript tr.addClass(“显示”)不工作

Question

我有下表：

<table class="table align-middle table-row-dashed fs-6 gy-5 row-child">
  <thead>
    <tr class="text-start text-gray-400 fw-bolder fs-7 text-uppercase gs-0">
      <th class="min-w-125px">
        header1
      </th>
      <th class="min-w-125px">
        header2
      </th>
      <th class="min-w-125px">
        header3
      </th>
    </tr>
  </thead>
  <tbody id="bodyTableReport">
    //body is generated via Ajax
  </tbody>
</table>

它具有以下功能：

function LoadTable(data) {
  ClearTableBodyHTML();
  data.forEach(d => {
    const {
      prop1,
      prop2,
      prop3,
      child1,
      child2
    } = d;
    var date = document.querySelector('#kt_datepicker_1').value;
    const row = document.createElement('tr');
    var rowChild = {
      child1: child1,
      child2: child2
    };
    arraysubTable[body1] = rowChild;
    row.innerHTML = `<td>${body1}</td>
                    <td>${body2}</td>
                    <td>${body3}</td>`;
    document.querySelector('#bodyTableReport').appendChild(row);
  })
}

问题是，对于每一行，我都有一个子表，其中有更多的数据和一个按钮，可以用这个函数来显示它：

$('#bodyTableReport').on('click', '.button-subtable', function() {
  console.log("entered");
  var tr = $(this).closest('tr');
  var idservice = $(this).closest('.button-subtable').attr('idservice');
  var row;
  if ($(this).hasClass('all-services')) {
    row = tableAllService.row(tr);
  } else {
    row = table.row(tr);
  }

  table.row

  if (row.child.isShown()) {
    row.child.hide();
    tr.removeClass('shown');
  } else {
    row.child(format(idservice)).show();
    tr.addClass('shown');
  }
});

格式方法是准备子表：

function format(d) {
  var employees;
  var vehicle;

  if (arraysubTable[d] != null) {
    employees = arraysubTable[d].Employees.map(function(emp) {
      return `<div class="employee-list">
                 <div class="employee-item" >
                  <p> 
                    <strong>Apellido: </strong> ${emp.lastName} <br> 
                    <strong>Nombre: </strong> ${emp.name}  <br> 
                    <strong>Tipo de Empleado: </strong> ${emp.typeEmployee} 
                  </p>
                  </div>
                    </div>`
    });
    vehicle = `<p> 
                <strong>IdInterno: </strong> ${arraysubTable[d].InternID} <br> 
                <strong>Distrito: </strong> ${arraysubTable[d].District}  <br> 
                <strong>Dominio: </strong> ${arraysubTable[d].Plate} 
              </p>`
  } else {
    employees = arraysubTableAll[d].Employees.map(function(emp) {
      return `<div class="employee-list">
                  <div class="employee-item" >
                    <p> 
                      <strong>Apellido: </strong> ${emp.lastName} <br> 
                      <strong>Nombre: </strong> ${emp.name}  <br> 
                      <strong>Tipo de Empleado: </strong> ${emp.typeEmployee}
                    </p>
                  </div>
                    </div>`
    });
    vehicle = `<p> 
                <strong>IdInterno: </strong> ${arraysubTableAll[d].InternID} <br> 
                <strong>Distrito: </strong> ${arraysubTableAll[d].District}  <br> 
                <strong>Dominio: </strong> ${arraysubTableAll[d].Plate} 
              </p>`
  }


  // `d` is the original data object for the row
  return `
        <div class="service-child" >
            <div class="vehicle-child" >
                <strong class="text-black">Vehiculo</strong>
                ${vehicle}
            </div>
            <div class="employees-child">
                <strong class="text-black">Empleados</strong>
                <div class="item-employee">
                    ${employees}
                </div>
            </div>
        </div>`;
}

这里的问题是单击了显示子表的按钮，并且正在执行format函数，并按预期的方式准备数据，但是子表从未显示tr.addClass('shown');不工作，控制台中也没有显示错误。

我能做些什么来解决这个问题？

Answer 1

使用tr.classlist.add(class)代替