JSFiddle - React, Tailwind, and code Playground

by Wei Lin Chen

HTML

<table id="mytable">
  <thead>
    <tr>
      <td width="20%">   </td>
      <td>book name</td>
      <td></td>
      <td></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="index">1</td>
      <td>AAA</td>
      <td>
        <input type="button" value="move up" class="move up" />
      </td>
      <td>
        <input type="button" value="move down" class="move down" />
      </td>
    </tr>
    <tr>
      <td class="index">2</td>
      <td>BBB</td>
      <td>
        <input type="button" value="move up" class="move up" />
      </td>
      <td>
        <input type="button" value="move down" class="move down" />
      </td>
    </tr>
    <tr>
      <td class="index">3</td>
      <td>CCC</td>
      <td>
        <input type="button" value="move up" class="move up" />
      </td>
      <td>
        <input type="button" value="move down" class="move down" />
      </td>
    </tr>
  </tbody>
</table>

CSS

td.index {
  width: 20%;
  text-alight: center;
  padding: 0 20px;
  color: gray;
}

JavaScript

$('#mytable tbody input.move').click(function() {
  var row = $(this).closest('tr');
  if ($(this).hasClass('up')) {
    row.prev().before(row);
  } else {
    row.next().after(row);
  }
  var aaa = row;
  var indexCols = $('#mytable tbody td.index');
  for (var i = 0; i < indexCols.length; i++) {
    indexCols[i].innerText = i + 1;
  }
});