How to Hide / Show Image on HTML page

Question

I am working with Dynamic HTML table in which I am showing my data as in HTML table as my data is in large amount so what I am doing is showing amount of data which will be fixe

Answer 1

I have updated the latest code below please check once.

explanation:

i have removed hideImage()&doHide()

in toggleImage() it will show the image and hide after 10 seconds

for me its working 100% please check and let me know

in showRows() if page reaching at last page then it will clear the interval time and set it to 7 seconds (10 seconds for image - 3 seconds delay)

 function toggleImage() {
        $("#displayImage").show();
        setTimeout(function () {
            $("#displayImage").hide();
        }, 10000);
    }

    function showRows() {
        // Any TRs that are not hidden and not already shown get "already-shown" applies
        if ($(".hidden:lt(12)").length > 0) { //checking is it is the last page or not
            $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
        } else { // if it is the last row
            $("tr:not(.hidden):not(.already-shown)").addClass("already-shown");
            toggleImage();
            //
            clearInterval(interval); //if last then clearing time interval and calling the function again 
            interval = false;
            setTimeout(function () {
                initTable(tableValue);
            }, 7000);
        }
        $(".hidden:lt(12)").removeClass("hidden"); // this one is to hide previous  rows and show next 
    }