www.webdeveloper.com
Results 1 to 6 of 6

Thread: Sorting a table with a form

  1. #1
    Join Date
    Mar 2013
    Posts
    5

    Sorting a table with a form

    Hi,

    I want to sort a table with a form in it in Javascript.

    I used to pick the innerHTML of the rows for sorting tables. However, when I do that with an input element of a form I always get the original content of the input. Somehow innerHTML doesn't notice it when the user has changed the value of the input.

    Does anyone know what is the logic behind this behavior. And how can I best work around it?

    Thanks,
    M

  2. #2
    Join Date
    Feb 2011
    Posts
    231
    Hi,
    You need to get the value from input, than, add the value in the code added with innerHTML.
    Something like this:
    Code:
    var val = document.getElementById('id_input').value;
    document.getElementById('id_row').innerHTML = '<input type="text" id="id_input" name="the_name" value="'+ val +'" />';

  3. #3
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    run this before you use innerHTML to copy the actual value into innerHTML-inclusive value attributes:

    Code:
    [].slice.call(document.querySelectorAll("input[value]")).map(function(a){
       a.setAttribute("value", a.value);
    });
    you can change "document" to a handle to the <table> element if it's touching inputs it shouldn't...

  4. #4
    Join Date
    Mar 2013
    Posts
    5
    rnd_me,
    This is a part of javascript where I feel absolutely ignorant. But the code worked. Thanks.

    Just one problem: it only works once. If I make a change and sort it works. If I then make another change and sort again that second change is not implemented - no matter whether I called the formula a second time or not.

  5. #5
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    Quote Originally Posted by musicmaster View Post
    rnd_me,
    This is a part of javascript where I feel absolutely ignorant. But the code worked. Thanks.

    Just one problem: it only works once. If I make a change and sort it works. If I then make another change and sort again that second change is not implemented - no matter whether I called the formula a second time or not.

    hmm, that's odd. i would guess that it's something to do with how the sort is coded, perhaps it's memorizing the "boot up" version of the table and resorting that each time.

    if you post the code you have and we can figure it out im sure.

    you might not even need to use innerHTML at all, you can simply grab the <tr> objects into an array, sort the array, and then loop though the array, appending each element of the sorted array of <tr>s to the <tbody>.
    there are also some table sorter plugins for jquery that make it pretty simple to implement the functionality....

  6. #6
    Join Date
    Mar 2013
    Posts
    5
    You were right. It was indeed an optimization in the script. It works now. Thank you!

    I wondered what you meant with grabbing the <tr> objects in an array.

    At the moment the code works as follows (a bit simplified):
    Code:
      for (var i = 0; i < length; i++) 
        { myarray[i] = new Array();
          myarray[i][0] = searchtext[i];
          myarray[i][1] = rows[i].innerHTML;
        }
    myarray.sort();
    // then insert the code back into the page
    If you have suggestions how this could be optimized that would be very welcome.

    BTW: can you recommend me a book where I can learn the kind of javascript functionality that you used to solve my initial problem?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles