编辑：我自己解决了这个问题。请参阅下面的答案

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

每个表格行都有一个文本框，我要的是，每次删除行时，文本框都会更新以反映文本框的顺序。例如。顶部的文本框始终为'1'，第二个始终为'2'，依此类推。

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

代码

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;
        },
    });
});

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>

解决方案

嗯..
我认为我们想做这样的事情：

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

$()。each()函数的信息在此处：http://docs.jquery.com/Core/each

#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);
}

十分简单！