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

Question

我重写了我的问题，以便更好地阐述我想要完成的事情以及到目前为止我已经尝试过的事情。

我的网站上有一个 table，它从数据库动态加载 table 行。我已成功将 jQuery UI "Sortable" 和 "Draggable" 功能集成到此页面。结果是当您将行拖动到相邻行上方或下方时数值会发生变化，因此总是更新 table.

中的第一列数字

这是table

<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>

这是有效的 jQuery 脚本

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
 <script src="../wp-content/themes/Excellence_At_Work/jquery.ui.touch-punch.min.js"></script>
 <script>
 var $j = jQuery.noConflict();
 var sort;
 $j(function() {
   $j("#sortable tbody").sortable({
     change: function(event, ui) {
  sort = 0;
  $j('#sortable tr.ui-state-default:not(".ui-sortable-helper")').each(function() {
    sort++;
    if ($j(this).hasClass('ui-sortable-placeholder'))
      ui.helper.find('td input[name^=sort]').attr('name', 'sort[]').attr('value', sort).val(sort);
    else
      $j(this).find('td input[name^=sort]').attr('name', 'sort[]').attr('value', sort).val(sort);
  });
     }
   });

$j("#sortable tbody").disableSelection();
 });
 </script>
 <script>jQuery('#sortable').draggable();</script>

正如您在 html 代码中看到的那样，我已经成功地集成了我需要重新定位行的按钮，但是在这样做时我需要第一个 td 的值也相应地更新，就像单调的方法。我将向下面的 javascript 添加什么以获取名称为 sort[] 的输入的值以更改为 table 行中新更改顺序 onclick 中的相应数字位置？

<script>
 var order;  // variable to set the selected row index
 function getSelectedRow()
 {
    var table = document.getElementById("sortable");
    for(var i = 0; i < table.rows.length; i++)
    {
        table.rows[i].onclick = function()
        {
        if(typeof order !== "undefined"){
            table.rows[order].classList.toggle("selected");
        }

        order = this.rowIndex;
        this.classList.toggle("selected");

        };
    }

 }
 getSelectedRow();

 function upNdown(direction)
 {
    var rows = document.getElementById("sortable").rows,
        parent = rows[order].parentNode;
     if(direction === "up")
     {
     if(order > 0){
        parent.insertBefore(rows[order],rows[order - 1]);  
        // when the row go up the index will be equal to index - 1
        order--;
    }

 }

 if(direction === "down")
 {
     if(order < rows.length){
        parent.insertBefore(rows[order + 1],rows[order]);
        // when the row go down the index will be equal to index + 1
        order++;
    }
 }
 }
 </script>

我希望这能更好地解释我想要完成的工作。我遇到了障碍，真的可以使用一些见解，在此先感谢所有可以提供见解的人。

更新

通过在 order-- 和 order++ 之后添加以下脚本，我已经能够成功地更新行第一个 td 值 onclick，但是此解决方案导致输入字段从 td 中删除。关于如何修改此脚本以包含输入字段的任何见解？

        Array.prototype.forEach.call(document.querySelectorAll('td:first-child'), function (elem, idx) {
        elem.innerHTML = 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 input[name^=sort]'

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

Answer 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 input[name^=sort]'

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

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

How to update first td value onclickthe way it does when dragging

javascript

sorting

jquery

jquery-ui-sortable