Javascript/Jquery effects not working when creating table in HTML

Asked

Viewed 34 times

0

Good morning to all,

I have a problem when displaying a table in html, I want to add an effect while it is presenting for example I am using

$("#delayed"). click(Function(){ $("tr"). delay(1000). show("slow"); })

Only the time that displays the table it goes fast and n comes with the effect follows below the code in HTML, JS and CSS.

$(document).ready(function(){
    $("button").click(function(){
        $("#hide").click(function(){
            $("p").delay(200).hide("slow");
        })
        $("#show").click(function(){
            $("p").delay(200).show("slow");
        })
        $("#delayed").click(function(){
            $("tr").delay(1000).show("slow");
        })
        $.get("https://jsonplaceholder.typicode.com/users", function(dado){
            var i;
            out = "<table border='0'>";
            for(i = 0; i < dado.length; i++){
                out+= "<tr id='delayed'><td>"+dado[i].id+"</td>";
                out+= "<td>"+dado[i].name+"</td>";
                out+= "<td>"+dado[i].email+"</td></tr>";
            }
            out += "</table>"
            document.getElementById("teste").innerHTML = out;
        });
    });
});
*{
    margin:0;
    padding:0;
    font-family: 'Lato', sans-serif;
}
h1{
    color: #fd9500;
}
header{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    top:0;
    left:0;
    text-align:center;
}
.button{
    border: none;
    color: #daf5ff;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    transition-duration: 0.4s;
    background-color: #0022ff;
}
.button span{
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 1s;
}
.button span:after{
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}

.button:hover span{
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 1s;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    padding-right: 25px;
}
.button:hover span:after {
    opacity: 1;
    right: 0;
}
table{
    border-collapse: collapse;
    width: 100%;
}

th, td{
    border-bottom: 1px solid #8578f7;
    padding: 8px;
    text-align: center;
    color: #fd9500;
}
<!DOCTYPE HTML>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="functionJS.js"></script>

<head>
    <meta charset="UTF-8">
    <title>Treinamento Front-End</title>
    <link href="http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext" rel="style" type="text/css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<header>
    <h1>Lista de Pessoas</h1>
    <button class="button"><span>Get Back Requests</span></button>
    <button class="button" id="hide"><span>Hide Request</span></button>
    <button class="button" id="show"><span>Show Requests</span></button>
    <p  id="teste"></p>
</header>
</body>

</html>

javascript html

  • Because your Html semantics is wrong, never put script to load right at the beginning of the page, always put after the Css, this generates a longer loading time.

2 answers

0

$(document).ready(function(){
		    	var teste = $("#teste").hide();
		        $("#hide").click(function(){
		            $("p").delay(200).hide("slow");
		        })
		        $("#show").click(function(){
		            $("p").delay(200).show("slow");
		        })
		        $("#get").click(function(){
		            $("p").delay(1000).show("slow");
		        })
		        $.get("https://jsonplaceholder.typicode.com/users", function(dado){
		            var i;
		            out = "<table border='0'>";
		            for(i = 0; i < dado.length; i++){
		                out+= "<tr class='a'><td>"+dado[i].id+"</td>";
		                out+= "<td>"+dado[i].name+"</td>";
		                out+= "<td>"+dado[i].email+"</td></tr>";
		            }
		            out += "</table>"
		            document.getElementById("teste").innerHTML = out;
		        });
		});
*{
			margin:0;
			padding:0;
			font-family: 'Lato', sans-serif;
		}
		h1{
			color: #fd9500;
		}
		header{
			position: fixed;
			width: 100%;
			height: 100%;
			background-color: #ffffff;
			top:0;
			left:0;
			text-align:center;
		}
		.button{
			border: none;
			color: #daf5ff;
			padding: 15px 32px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-size: 16px;
			margin: 4px 2px;
			cursor: pointer;
			transition-duration: 0.4s;
			background-color: #0022ff;
		}
		.button span{
			cursor: pointer;
			display: inline-block;
			position: relative;
			transition: 1s;
		}
		.button span:after{
			content: '\00bb';
			position: absolute;
			opacity: 0;
			top: 0;
			right: -20px;
			transition: 0.5s;
		}

		.button:hover span{
			cursor: pointer;
			display: inline-block;
			position: relative;
			transition: 1s;
			box-shadow: 0 12px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
			padding-right: 25px;
		}
		.button:hover span:after {
			opacity: 1;
			right: 0;
		}
		table{
			border-collapse: collapse;
			width: 100%;
		}

		th, td{
			border-bottom: 1px solid #8578f7;
			padding: 8px;
			text-align: center;
			color: #fd9500;
		}
<link href="http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext" rel="style" type="text/css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
<header>
	    <h1>Lista de Pessoas</h1>
	    <button class="button" id="get"><span>Get Back Requests</span></button>
	    <button class="button" id="hide"><span>Hide Request</span></button>
	    <button class="button" id="show"><span>Show Requests</span></button>
	    <p id="teste"></p>
	</header>

This function does not run pq in HTML it did not find any id delayed

    $("#delayed").click(function(){
        $("tr").delay(1000).show("slow");
    })

  • Sorry, I misplaced this part unintentionally but even putting in the part id it n works to do

  • Just make it work.

0

The first problem I see is the repetition of id='delayed'. You can remove it because it seems unnecessary:

...
out+= "<tr><td>"+dado[i].id+"</td>";
...

Another problem is these events within another event:

$("button").click(function(){
        $("#hide").click(function(){
            $("p").delay(200).hide("slow");
        })
        $("#show").click(function(){
            $("p").delay(200).show("slow");
        })
        $("#delayed").click(function(){
            $("tr").delay(1000).show("slow");
        })

You don’t have to do this, put the events apart, and remove the $("#delayed").click(, just staying:

$("#hide").click(function(){
   $("p").delay(200).hide("slow");
})
$("#show").click(function(){
   $("p").delay(200).show("slow");
})

Another thing is the <p id="teste"> that should start hidden with:

#teste{
   display: none;
}

Also change the event selector that will call Ajax, to catch the click only of the first button:

$("button:eq(0)").click(function(){...

And after the return of Ajax, fire a click on div #show to show the result with effect:

$("#show").click();

The whole code would look like this:

$(document).ready(function(){
      $("#hide").click(function(){
         $("p").delay(200).hide("slow");
      })
      $("#show").click(function(){
         $("p").delay(200).show("slow");
      })
    $("button:eq(0)").click(function(){
        $.get("https://jsonplaceholder.typicode.com/users", function(dado){
            var i;
            out = "<table border='0'>";
            for(i = 0; i < dado.length; i++){
                out+= "<tr><td>"+dado[i].id+"</td>";
                out+= "<td>"+dado[i].name+"</td>";
                out+= "<td>"+dado[i].email+"</td></tr>";
            }
            out += "</table>"
            document.getElementById("teste").innerHTML = out;
            $("#show").click();
        });
    }).trigger("click");
});
*{
    margin:0;
    padding:0;
    font-family: 'Lato', sans-serif;
}
h1{
    color: #fd9500;
}
header{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    top:0;
    left:0;
    text-align:center;
}
.button{
    border: none;
    color: #daf5ff;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    transition-duration: 0.4s;
    background-color: #0022ff;
}
.button span{
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 1s;
}
.button span:after{
    content: '\00bb';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
}

.button:hover span{
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 1s;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    padding-right: 25px;
}
.button:hover span:after {
    opacity: 1;
    right: 0;
}
table{
    border-collapse: collapse;
    width: 100%;
}

th, td{
    border-bottom: 1px solid #8578f7;
    padding: 8px;
    text-align: center;
    color: #fd9500;
}

#teste{
   display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
    <h1>Lista de Pessoas</h1>
    <button class="button"><span>Get Back Requests</span></button>
    <button class="button" id="hide"><span>Hide Request</span></button>
    <button class="button" id="show"><span>Show Requests</span></button>
    <p id="teste"></p>
</header>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.