如何在拖动时更新第一个 td 值 onclick答案

【问题标题】：How to update first td value onclickthe way it does when dragging如何在拖动时更新第一个 td 值 onclick
【发布时间】：2018-08-29 05:49:54
【问题描述】：

我已经重写了我的问题，以便更好地说明我正在努力完成什么以及到目前为止我已经尝试过什么。

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

这是桌子

<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 的值也像单调和 drop 方法一样相应地更新。我将在下面的 javascript 中添加什么以获取名称为 sort[] 的输入值以更改为在表行中新更改的 order 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;

最终更新

我已经成功完成了我的任务，并且对上次更新的 sn-p 进行了微小的调整，我能够让上面的表格按说明工作。

  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 列中的所有输入字段，并且不再用纯文本替换输入字段。

【问题讨论】：

感谢 Ali 纠正了我的错字，对这个问题本身有什么见解吗？

标签： javascript jquery sorting jquery-ui-sortable

【解决方案1】：

最终更新

我已经成功完成了我的任务，并且对上次更新的 sn-p 进行了微小的调整，我能够让上面的表格按说明工作。

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 列中的所有输入字段，并且不再用纯文本替换输入字段。

【讨论】：