Hay una tabla HTML que está configurada para que se pueda arrastrar a través de 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>Aquí la primera columna tiene el número de fila. Al arrastrar una fila, quiero volver a organizar todo el número en el orden correcto. ¿Puede sugerirme una forma de hacerlo a través de JavaScript o jQuery?
Personalmente, me sentiría tentado a usar una variable de contador CSS y asignarla como el contenido de la celda de la tabla, por lo que no debería importar cómo se arrastren, se numerarán automáticamente. También estaría tentado a eliminar los controladores de eventos en línea a favor de una versión registrada externamente.
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>