Измените значение текстового поля на текущий порядок в сортируемой вкладке

Question

Редактировать: я решил это сам. См. мой ответ ниже

Я создал хорошую сортируемую таблицу с помощью 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>

Answer 1

Hardnrg в #jquery в итоге решил это за меня.

Это включало добавление 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);
}

Легкий горох!

Answer 2

Хммм .. Я думаю, что вы хотите сделать что-то вроде этого:

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

Информация о функции $ (). Each () находится здесь: http://docs.jquery.com/Core/each