Sorting a table with a form

[musicmaster]

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

[MarPlo]

Hi,
You need to get the value from input, than, add the value in the code added with innerHTML.
Something like this:

var val = document.getElementById('id_input').value;
document.getElementById('id_row').innerHTML = '<input type="text" id="id_input" name="the_name" value="'+ val +'" />';

[rnd me]

run this before you use innerHTML to copy the actual value into innerHTML-inclusive value attributes:

[].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...

[musicmaster]

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.

[rnd me]

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

[musicmaster]

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

  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?