Question

I need to filter my table so it only uses the minimum amount of rows needed, for example the result of a filter with say 12 results should have 3 rows if the table dimension had a width of 5 columns. What i have now only filters out columns of rows leaving a table with too many rows.

jQuery:

$("#filter").keyup(function(){

        // Retrieve the input field text and reset the count to zero
        var filter = $(this).val(), count = 0;

        // Loop through the comment list
        $("td").each(function(){

            // If the list item does not contain the text phrase fade it out
            if ($(this).text().search(new RegExp(filter, "i")) < 0) {
                $(this).hide();

            // Show the list item if the phrase matches and increase the count by 1
            } else {
                $(this).show();
                count++;
            }
        });

        // Update the count
        var numberItems = count;
        $("#filter-count").text("Number of Comments = "+count);
    });

$i++;

Answer 1

This won’t work. Instead of td’s, you better use div’s with a fixed width and height and apply float: left to them. Then the answers will always display as full rows, except, possibly, the last row.

You can use td’s, but that’s much harder. You have to get the td’s and then rebuild the whole table with tr’s and put the td’s back.