这是一个jQuery的例子，如果你的应用增长，你可能会受益于像React这样的JS框架。
请注意，数据不会持久化--如果您想保持状态，则需要将其保存到数据库等。

<h2 class="GFG">Overall Experince</h2>
<p class="OK">Drag and Drop table row</p>
<table id="GFG"></table>
<button id='reset'>Reset</button>

CSS未变更

$(document).ready(() => {
  // variable to hold the top row of the table
  const tableHeader = `
    <tr>
      <td>Action</td>
      <th>Question Subquestion/Text</th>
      <th>Sort order</th>
      <th>Delete</th>
      <th>View</th>
      <th>Edit</th>
    </tr>
  `

  // initialise the list of questions - this may come from an API or external file
  let questions = [
      {id: 1, question: 'Question1' },
      {id: 2, question: 'Question2' },
      {id: 3, question: 'Question3' },
      {id: 4, question: 'Question4' },
      {id: 5, question: 'Question5' },
      {id: 6, question: 'Question6' },
      {id: 7, question: 'Question7' },
      {id: 8, question: 'Question8' },
    ]; 
  
  // the function to call to rebuild the table, it makes a list of rows from
  // the questions variables and prepends the top row to make the table
  // this will be slower the more rows you have 

  // the delete button is clicked via an on click event handler below
  // view and edit are simple links that open in new tabs, change the 
  // href attribute to what you want to show
  function buildTable() {
    const list = questions.map((q, index) => {
      return (`
          <tr>
            <td>${q.id}</td>
            <td>${q.question}</td>
            <td>${index+1}</td>
            <td class='delete' data-id='${q.id}'>Delete</td>
            <td class='view'><a target="_blank" href='/view/${q.id}'>View</a></td>
            <td class='edit'><a target="_blank" href='/edit/${q.id}'>Edit</a></td>
          </tr>
        `)
    })
    $('table#GFG').html(tableHeader + list.join(''))
  }
  
  // call the buildTable function to make the table when the page loads
  buildTable()
  
  // when the delete button is clicked, delete the row associated, then rebuild
  // the table when the row is deleted to show changes
  $('table#GFG').on('click', 'td.delete', (e) => { 
    questions = questions.filter(q => {
      if (q.id != e.target.dataset.id) { return true }
    })
    buildTable() 
  })
  
  // reset the questions to the default state and rebuild table 
  $('button#reset').on('click', () => {
    questions = [
      {id: 1, question: 'Question1' },
      {id: 2, question: 'Question2' },
      {id: 3, question: 'Question3' },
      {id: 4, question: 'Question4' },
      {id: 5, question: 'Question5' },
      {id: 6, question: 'Question6' },
      {id: 7, question: 'Question7' },
      {id: 8, question: 'Question8' },
    ]
    buildTable()
  })
});

// did not change this 
$(function () {
  $("#GFG").sortable({
    items: 'tr:not(tr:first-child)',
    dropOnEmpty: false,
    start: function (G, ui) {
      ui.item.addClass("select");
    },
    stop: function (G, ui) {
      ui.item.removeClass("select");
      $(this).find("tr").each(function (GFG) {
        if (GFG > 0) {
          $(this).find("td").eq(2).html(GFG);
        }
      });
    }
  });
});