HTML中拖放一行时如何使行号自动调整

Question

有一个 HTML table 通过 jQuery 将 tbody 设置为可拖动。

$('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>

在这里第一列有行号。拖动一行时，我想将所有数字重新排列为正确的顺序。你能建议我通过 JavaScript 或 jQuery.

来做到这一点吗

Answer 1

就我个人而言，我很想使用一个 CSS 计数器变量并将其分配为 table 单元格的内容，这样无论这些变量如何拖动都将自动编号.我也想删除内联事件处理程序以支持外部注册版本。

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>

HTML中拖放一行时如何使行号自动调整

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

html

javascript

css

jquery

draggable