How to make the row number to adjust automatically when drag and drop a row in HTML-CodePudding

There is a HTML table which is set tbody to draggable via jQuery.

$('tbody').sortable();
                            
   var checklistContentTableOnSort = document.getElementById('table');

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table table-bordered table-hover" id="table">
   <thead>
      <tr>
         <th class="text-center"> # </th>
         <th class="text-center"> Text </th>
         <th class="text-center"> Comment </th>
      </tr>
   </thead>
   <tbody class="ui-sortable">
      <tr id="addr0" class="ui-sortable-handle">
         <td> 1 </td>
         <td>         <input type="text" name="text0" placeholder="Text" class="form-control" onchange="addValueOnChange(this)" value="Adg">       </td>
         <td>         <input type="text" name="comment0" placeholder="Comment" class="form-control" onchange="addValueOnChange(this)" value="A">       </td>
      </tr>
      <tr class="ui-sortable-handle">
         <td>2</td>
         <td><input name="text2" type="text" placeholder="Text" class="form-control input-md" onchange="addValueOnChange(this)" value="B"> </td>
         <td><input name="comment2" type="text" placeholder="Comment" class="form-control input-md" onchange="addValueOnChange(this)" value="B"></td>
      </tr>
      <tr class="ui-sortable-handle">
         <td>3</td>
         <td><input name="text3" type="text" placeholder="Text" class="form-control input-md" onchange="addValueOnChange(this)" value="C"> </td>
         <td><input name="comment3" type="text" placeholder="Comment" class="form-control input-md" onchange="addValueOnChange(this)" value="C"></td>
      </tr>
   </tbody>
</table>

In here the first column has the row number. When dragging a row, I want to re arrange all the number to the correct order. can you suggest me a way to do this via JavaScript or jQuery.

CodePudding user response：

Personally I would be tempted to use a CSS counter variable and assign that as the content of the table cell so then it should not matter how these are dragged it will be automagically be numbered. Id also be tempted to remove the inline event handlers in favour of an externally registered version.

const addValueOnChange=(n)=>{alert(n.value)}// example only

document.querySelectorAll('tbody td input[type="text"]').forEach(n=>n.addEventListener('change',function(e){
  addValueOnChange(this)
}))

:root{
  counter-reset:rows;
}
tbody tr{
  counter-increment:rows;
}
tbody tr td:first-of-type:before{
  content:counter(rows);
}

<table class="table table-bordered table-hover" id="table">
   <thead>
      <tr>
         <th class="text-center"> # </th>
         <th class="text-center"> Text </th>
         <th class="text-center"> Comment </th>
      </tr>
   </thead>
   <tbody class="ui-sortable">
      <tr id="addr0" class="ui-sortable-handle">
         <td></td>
         <td><input type="text" name="text0" placeholder="Text" class="form-control" value="Adg" /></td>
         <td><input type="text" name="comment0" placeholder="Comment" class="form-control" value="A" /></td>
      </tr>
      <tr class="ui-sortable-handle">
         <td></td>
         <td><input name="text2" type="text" placeholder="Text" class="form-control input-md" value="B" /></td>
         <td><input name="comment2" type="text" placeholder="Comment" class="form-control input-md" value="B" /></td>
      </tr>
      <tr class="ui-sortable-handle">
         <td></td>
         <td><input name="text3" type="text" placeholder="Text" class="form-control input-md" value="C" /> </td>
         <td><input name="comment3" type="text" placeholder="Comment" class="form-control input-md" value="C" /></td>
      </tr>
   </tbody>
</table>