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

Posted 2023-05-08

【中文标题】在可排序选项卡中将文本框的值更改为其当前顺序

【英文标题】：Change the value of a text box to its current order in a sortable tab

【发布时间】：2010-09-13 19:12:17

【问题描述】：

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

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

每个表格行都有一个文本框，我想要的是，每次删除一行时，文本框都会更新以反映文本框的顺序。 例如顶部的文本框的值始终为“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>

【参考方案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);

简单易懂！

【参考方案2】：

嗯.. 我想你想做这样的事情：

$("input:text", "#table-2").each( function(i) this.value=i+1; );

$().each() 函数的信息在这里：http://docs.jquery.com/Core/each