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

编辑:我自己解决了这个问题。见 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;
        },
    });
});

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>