javascript - 将文本框的值更改为其在可排序选项卡中的当前顺序

Question

编辑:我自己解决了这个问题。参见 my answer below

我已经用 jQuery 设置了一个漂亮的可排序表，它非常好。但现在我想扩展它。

每个表行都有一个文本框，我希望每次删除一行时，文本框都会更新以反射(reflect)文本框的顺序。 例如顶部文本框的值始终为“1”，第二个文本框的值始终为“2”，依此类推。

我正在使用 jQuery 和 Table Drag and Drop JQuery plugin

代码

Javascript:

<script type = "text/javascript" >
  $(document).ready(function () {
    $("#table-2").tableDnD({
      onDrop: function (table, row) {
        var rows = table.tBodies[0].rows;
        var debugStr = "Order: ";
        for (var i = 0; i < rows.length; i++) {
          debugStr += rows[i].id + ", ";
        }
        console.log(debugStr)
        document.forms['productform'].sort1.value = debugStr;
        document.forms['productform'].sort2.value = debugStr;
        document.forms['productform'].sort3.value = debugStr;
        document.forms['productform'].sort4.value = debugStr;
      },
    });
  }); 
</script>

HTML 表格:

<form name="productform">
  <table cellspacing="0" id="table-2" name="productform">
    <thead>
      <tr>
        <td>Product</td>
        <td>Order</td>
      </tr>
    </thead>
    <tbody>
      <tr class="row1" id="Pol">
        <td><a href="1/">Pol</a></td>
        <td><input type="textbox" name="sort1"/></td>
      </tr>
      <tr class="row2" id="Evo">
        <td><a href="2/">Evo</a></td>
        <td><input type="textbox" name="sort2"/></td>
      </tr>
      <tr class="row3" id="Kal">
        <td><a href="3/">Kal</a></td>
        <td><input type="textbox" name="sort3"/></td>
      </tr>
      <tr class="row4" id="Lok">
        <td><a href="4/">Lok</a></td>
        <td><input type="textbox" name="sort4"/></td>
      </tr>
    </tbody>
  </table>
</form>

Answer 1

#jquery 中的 Hardnrg 最终为我解决了这个问题。

它涉及为每个输入添加一个 id="":

<form name="productform">
    <table cellspacing="0" id="table-2" name="productform"> 
        <thead>
            <tr><td>Product</td>    <td>Order</td></tr> 
        </thead>

        <tbody>
            <tr class="row1" id="Pol">  <td><a href="1/">Pol</a></td>   <td><input id="Pol_field" type="textbox" name="sort1"/></td>    </tr>
            <tr class="row2" id="Evo">  <td><a href="2/">Evo</a></td>   <td><input id="Evo_field" type="textbox" name="sort2"/></td>    </tr>
            <tr class="row3" id="Kal">  <td><a href="3/">Kal</a></td>   <td><input id="Kal_field" type="textbox" name="sort3"/></td>    </tr>
            <tr class="row4" id="Lok">  <td><a href="4/">Lok</a></td>   <td><input id="Lok_field" type="textbox" name="sort4"/></td>    </tr>
        </tbody> 
    </table>
</form>

并将此 js 添加到 OnDrop 事件中:

for (var i=0; i < rows.length; i++) {
    $('#' + rows[i].id + "_field").val(i+1);
}

简单易行!