JavaScript drop Table row before or after an other row - Stack Overflow

admin管理员组

文章数量:1344598

my script for dragging and dropping table rows inserts the rows always before (in function dropHandler). This works fine, but I additionally would like to check if I dropped the row AFTER the last existing row and then insert the row at the end of the table body.

Is there a way to do this?

/*** Drag und Drop der Tabellenzeilen */
function dragstartHandler(ev) {
  sourceRow = ev.target;
  sourceTableId = sourceRow.closest("table").id;
}

function dragoverHandler(ev) {
  ev.preventDefault();
}

function dropHandler(ev) {
  ev.preventDefault();
  targetRow = ev.target.closest("tr");
  targetTable = targetRow.closest("table");
  targetTableId = targetRow.closest("table").id;
  if (sourceTableId === targetTableId) {
    //console.log("richtige Tabelle");
    targetTableBody = targetRow.closest("tbody");
    targetTableBody.insertBefore(sourceRow, targetRow);
    rebuildIndex(targetTableBody);
    //sourceRow.classList.remove("dragRow");
  } else {
    console.log("falsche Tabelle")
  }
}

<table id="table2">
  <thead>
    <tr>
      <th>Head1</th>
      <th>Head2</th>
      <th>Head3</th>
      <th>Head4</th>
    </tr>
  </thead>
  <tbody id="tableBody-table2">
    <tr id="table2_row1" draggable="true" ondragstart="dragstartHandler(event)" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)">
      <td>table 2 values 1</td>
      <td>table 2 values 2</td>
      <td>table 2 values 3</td>
      <td>table 2 values 4</td>
    </tr>
    <tr id="table2_row2" draggable="true" ondragstart="dragstartHandler(event)" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)">
      <td>table 2 values 5</td>
      <td>table 2 values 6</td>
      <td>table 2 values 7</td>
      <td>table 2 values 8</td>
    </tr>
    <tr id="table2_row3" draggable="true" ondragstart="dragstartHandler(event)" ondrop="dropHandler(event)" ondragover="dragoverHandler(event)">
      <td>table 2 values 8</td>
      <td>table 2 values 9</td>
      <td>table 2 values 10</td>
      <td>table 2 values 11</td>
    </tr>
  </tbody>
</table>

本文标签： JavaScript drop Table row before or after an other rowStack Overflow