code_junkie

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

Nov 11th, 2011
98
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.02 KB | None | 0 0
  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. $("#table-2").tableDnD({
  4. onDrop: function(table, row) {
  5. var rows = table.tBodies[0].rows;
  6. var debugStr = "Order: ";
  7. for (var i=0; i<rows.length; i++) {
  8. debugStr += rows[i].id+", ";
  9. }
  10. console.log(debugStr)
  11. document.forms['productform'].sort1.value = debugStr;
  12. document.forms['productform'].sort2.value = debugStr;
  13. document.forms['productform'].sort3.value = debugStr;
  14. document.forms['productform'].sort4.value = debugStr;
  15. },
  16. });
  17. });
  18.  
  19. <form name="productform">
  20. <table cellspacing="0" id="table-2" name="productform">
  21. <thead>
  22. <tr><td>Product</td> <td>Order</td></tr>
  23. </thead>
  24.  
  25. <tbody>
  26. <tr class="row1" id="Pol"> <td><a href="1/">Pol</a></td> <td><input type="textbox" name="sort1"/></td> </tr>
  27. <tr class="row2" id="Evo"> <td><a href="2/">Evo</a></td> <td><input type="textbox" name="sort2"/></td> </tr>
  28. <tr class="row3" id="Kal"> <td><a href="3/">Kal</a></td> <td><input type="textbox" name="sort3"/></td> </tr>
  29. <tr class="row4" id="Lok"> <td><a href="4/">Lok</a></td> <td><input type="textbox" name="sort4"/></td> </tr>
  30. </tbody>
  31. </table>
  32. </form>
  33.  
  34. <form name="productform">
  35. <table cellspacing="0" id="table-2" name="productform">
  36. <thead>
  37. <tr><td>Product</td> <td>Order</td></tr>
  38. </thead>
  39.  
  40. <tbody>
  41. <tr class="row1" id="Pol"> <td><a href="1/">Pol</a></td> <td><input id="Pol_field" type="textbox" name="sort1"/></td> </tr>
  42. <tr class="row2" id="Evo"> <td><a href="2/">Evo</a></td> <td><input id="Evo_field" type="textbox" name="sort2"/></td> </tr>
  43. <tr class="row3" id="Kal"> <td><a href="3/">Kal</a></td> <td><input id="Kal_field" type="textbox" name="sort3"/></td> </tr>
  44. <tr class="row4" id="Lok"> <td><a href="4/">Lok</a></td> <td><input id="Lok_field" type="textbox" name="sort4"/></td> </tr>
  45. </tbody>
  46. </table>
  47. </form>
  48.  
  49. for (var i=0; i < rows.length; i++) {
  50. $('#' + rows[i].id + "_field").val(i+1);
  51. }
  52.  
  53. $("input:text", "#table-2").each( function(i){ this.value=i+1; });
Add Comment
Please, Sign In to add comment