Javascript 如何按拖动时的方式更新第一个td值

我重写了我的问题，以便更好地阐述我正在努力实现的目标以及迄今为止我所做的努力

我的网站上有一个表，可以从数据库中动态加载表行。我已经成功地将jQueryUI的“可排序”和“可拖动”功能集成到此页面。结果是，当您拖动相邻行上方或下方的行时，数值会发生变化，因此始终更新表中的第一列数字

这是桌子

<form action="" method="post" id="sort_picks">

 <div class="sort-picks-container">

 <table class="table-preference-order" id="sortable">
<tbody class="ui-sortable">

<?php
    $counter = 1;
    foreach ( $result as $query ){ 
        $pickcheck = "SELECT * FROM picks";
        $pickcutoffcheck = $wpdb->get_results( $wpdb->prepare ($pickcheck, OBJECT_K ));
        foreach ($pickcutoffcheck as $pickcutoffresult) { ?>

        <div style="display:none;"><?php echo $pickcutoffresult->pickCutoff; ?></div>
        <?php } ?>
        <?php $maxlimit = $wpdb->get_row("SELECT count(*) as CNT1 FROM picks where User='$userid'"  ); ?>
      <tr class="ui-state-default preference-row">

        <td class="index preference-pick-order">
            <input type="text" class="pick-order" id="sort" name="sort[]" pattern="[1-<?php echo $maxlimit->CNT1; ?>]{1,2}" value="<?php echo $counter; ?>" style="border:0px;max-width:60px;font-size:20px;" readonly>
        </td>

        <td class="preference-pick-order">
          <input type="text" name="rem[]" class="borderless" style="text-align:left;width:25px;display:none;" value="<?php echo $query->REM; ?>" readonly><?php echo $query->REM; ?>
        </td>
        <td class="preference-emp-info">
          <input type="text" name="empname[]" class="borderless" style="display:none;" value="<?php echo $query->EmpName; ?>" readonly><b><?php echo $query->EmpName; ?></b>
        </td>
        <td class="preference-start-class">
          <input type="text" name="starttime[]" class="borderless" style="text-align:left;max-width:75px;display:none;" value="<?php echo $query->StartTime; ?>" readonly><?php echo $query->StartTime; ?>
        </td>
        <td class="preference-details">
            <input type="text" name="job_details[]" class="borderless" value="<?php echo $query->Job_Details; ?>" readonly style="display:none;"><?php echo $query->Job_Details; ?>
          <br>
                <input type="text" name="startdate[]" class="borderless" style="font-weight:bold;width:100%;text-align:left;display:none;" value="<?php if($query->StartDate!=""){echo date('l\, F jS Y', strtotime($query->StartDate)); }?>" readonly><?php if($query->StartDate!=""){echo date('l\, F jS Y', strtotime($query->StartDate)); }?>
        </td>
      </tr>
    <?php $counter++; ?>
 <?php  }?>
      </tbody>
 </table>

 </div>
 <br>
 <div class="sorters-holder">
    <button onclick="upNdown('up');return false;" class="sorters">&wedge; </button><br>
    <button onclick="upNdown('down');return false;" class="sorters">&vee;</button>
 </div>
        <div style="display:block;margin:auto;text-align:center;">


 <input type="submit" name="submit[]" value="Next" class="job-select-submit" id="validate">&nbsp;&nbsp;<input type="button" onclick="window.history.go(-1); return false;" value="Back" class="job-select-submit">
    </div>
 </form>

最终更新

我已经成功地完成了我的任务，对上次更新的代码片段进行了一点小小的调整，我就能够使上面的表单按说明工作

  Array.prototype.forEach.call(document.querySelectorAll('td:first-child input[name^=sort]'), function (elem, idx) {
    elem.value = idx + 1;

Array.prototype.forEach.call(document.querySelectorAll('td:first-child input[name^=sort]'), function (elem, idx) {
elem.value = idx + 1;

通过改变

 'td:first-child'

'td:first-child'

到

我能够引用特定的输入字段，而不是第一个td列中的所有输入字段，并且不再使用纯文本替换输入字段。

最终更新

我已经成功地完成了我的任务，对上次更新的代码片段进行了一点小小的调整，我就能够使上面的表单按说明工作

  Array.prototype.forEach.call(document.querySelectorAll('td:first-child input[name^=sort]'), function (elem, idx) {
    elem.value = idx + 1;

Array.prototype.forEach.call(document.querySelectorAll('td:first-child input[name^=sort]'), function (elem, idx) {
elem.value = idx + 1;

通过改变

 'td:first-child'

'td:first-child'

到

---

我能够引用特定的输入字段，而不是第一个td列中的所有输入字段，并且不再使用纯文本替换输入字段。

感谢Ali修复了我的打字错误，偶然发现了问题本身吗？

'td:first-child input[name^=sort]'