CODEWITHSUNDEEP
javascriptjqueryhtml
Josh Hunt
Josh Hunt

Reputation: 14501

Change the value of a text box to its current order in a sortable tab

Edit: I have solved this by myself. See my answer below

I have set up a nice sortable table with jQuery and it is quite nice. But now i want to extend it.

Each table row has a text box, and i want i am after is to, every time a row is dropped, the text boxes update to reflect the order of the text boxes. E.g. The text box up the top always has the value of '1', the second is always '2' and so on.

I am using jQuery and the Table Drag and Drop JQuery plugin

Code

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 Table:

<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>

Upvotes: 2

Views: 1462

Answers (2)

Josh Hunt
Josh Hunt

Reputation: 14501

Hardnrg in #jquery ended up solving it for me.

It involved adding an id="" to each input:

<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>

And add this js to the OnDrop event:

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

Easy peasy!

Upvotes: 1

Sugendran
Sugendran

Reputation: 2109

Hmmm.. I think you want to do something like this:

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

The $().each() function's info is here: http://docs.jquery.com/Core/each

Upvotes: 0

Related Questions