Pesquisar na Comunidade
Mostrando resultados para as tags ''inserir dados tabela javascript''.
Encontrado 1 registro
-
Olá gostaria de trocar os "produtos" do site por uma tabela que eu poderia incluir e excluir itens (adicionar ou ocultar) apenas com um codigo que seria sequencial, um nome do produto e o preço,apos clicar em um botão incluir ele inseria o item na tabela e ao clicar em excluir(excluiria ou ocultaria) o item, não tenho ideia de como fazer em JavaScript com Jquery, aqui vai o html e o css que fiz: <!doctype html> <html> <head> <meta charset="utf-8"> <title>SURFHOUSE</title> <!--Estilos--> <link href="estilos.css" rel="stylesheet"><hr> </head> <body> <!--TOPO--> <div id="topo"> <!--Conteúdo Esquerdo--> <div id="conteudoEsquerdo"> <div id="logo"></div> <div id="carrinho"> <h1 class="totalCarrinho">Total: 800,00</h1> <h2 class="itensCarrinho">2 itens no carrinho</h2> </div> <div id="pesquisa"> <form> <input type="text" value="Pesquisar" class="campoP"> <input type="image" src="imagens/lupa.png" class="btnP"> </form> </div> <div id="quadroAmarelo"> <h1 class="tituloQuadroAmarelo"> welcome to surfhouse </h1> <p class="textoQuadroAmarelo"> The only online store you will ever need for all your windsurfing and kitesurfing and SUP needs </p> </div> </div> <!--Conteúdo Direito--> <div id="conteudoDireito"> <div id="redesSociais"> <img src="imagens/facebook.png"> <img src="imagens/twitter.png"> <img src="imagens/youtube.png"> <img src="imagens/pinterest.png"> <img src="imagens/instagram.png"> </div> <h1 class="tituloPromocao"> PROMOÇÃO </h1> <p class="textoPromocao"> This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit </p> <a href="#" class="linkPromocao">Participe</a> </div> </div> <!--PRINCIPAL--> <div id="centralizar"> <div id="widgets"> <!--menu--> <div id="menu"> <h1 class="tituloMenu">MENU</h1> <a href="#" class="linkMenu">INÍCIO</a> <a href="#" class="linkMenu">QUEM SOMOS</a> <a href="#" class="linkMenu">MARCAS</a> <a href="#" class="linkMenu">PROMOÇÕES</a> <a href="#" class="linkMenu">CONTATO</a> <a href="#" class="linkMenu">TRABALHE CONOSCO</a> </div> <!--Mais Buscados--> <div id="maisBuscados"> <h1 class="maisBuscados">Mais Buscados</h1> <a href="#" class="linkMaisBuscados">Link 1</a> <a href="#" class="linkMaisBuscados">Link 2</a> <a href="#" class="linkMaisBuscados">Link 3</a> <a href="#" class="linkMaisBuscados">Link 4</a> <a href="#" class="linkMaisBuscados">Link 5</a> <a href="#" class="linkMaisBuscados">Link 6</a> <a href="#" class="linkMaisBuscados">Link 7</a> <a href="#" class="linkMaisBuscados">Link 8</a> <a href="#" class="linkMaisBuscados">Link 9</a> <a href="#" class="linkMaisBuscados">Link 10</a> <a href="#" class="linkMaisBuscados">Link 11</a> <a href="#" class="linkMaisBuscados">Link 12</a> <a href="#" class="linkMaisBuscados">Link 13</a> <a href="#" class="linkMaisBuscados">Link 14</a> <a href="#" class="linkMaisBuscados">Link 15</a> <a href="#" class="linkMaisBuscados">Link 16</a> <a href="#" class="linkMaisBuscados">Link 17</a> <a href="#" class="linkMaisBuscados">Link 18</a> </div> <!--Em Destaque--> <div id="maisBuscados"> <h1 class="maisBuscados">Em Destaque</h1> <a href="#" class="linkEmDestaque">Link 1</a> <a href="#" class="linkEmDestaque">Link 2</a> <a href="#" class="linkEmDestaque">Link 3</a> <a href="#" class="linkEmDestaque">Link 4</a> <a href="#" class="linkEmDestaque">Link 5</a> <a href="#" class="linkEmDestaque">Link 6</a> <a href="#" class="linkEmDestaque">Link 7</a> <a href="#" class="linkEmDestaque">Link 8</a> <a href="#" class="linkEmDestaque">Link 9</a> <a href="#" class="linkEmDestaque">Link 10</a> </div> </div> <!--produtos--> <div id="produtos"> <h1 class="tituloProdutos">PRODUTOS NOVOS</h1> <div id="produto"> <img src="imagens/produto.png"> <h1 class="descricaoProduto">Produto 01</h1> <h1 class="precoProduto">R$ 900,00</h1> </div> <div id="produto"> <img src="imagens/produto.png"> <h1 class="descricaoProduto">Produto 01</h1> <h1 class="precoProduto">R$ 900,00</h1> </div> <div id="produto"> <img src="imagens/produto.png"> <h1 class="descricaoProduto">Produto 01</h1> <h1 class="precoProduto">R$ 900,00</h1> </div> <div id="produto"> <img src="imagens/produto.png"> <h1 class="descricaoProduto">Produto 01</h1> <h1 class="precoProduto">R$ 900,00</h1> </div> <div id="produto"> <img src="imagens/produto.png"> <h1 class="descricaoProduto">Produto 01</h1> <h1 class="precoProduto">R$ 900,00</h1> </div> <div id="produto"> <img src="imagens/produto.png"> <h1 class="descricaoProduto">Produto 01</h1> <h1 class="precoProduto">R$ 900,00</h1> </div> </div> <!--produtos--> <div id="produtos"> <h1 class="tituloProdutos">QUEIMA DE ESTOQUE</h1> <div id="produto"> <img src="imagens/produto.png"> <h1 class="descricaoProduto">Produto 01</h1> <h1 class="precoProduto">R$ 900,00</h1> </div> <div id="produto"> <img src="imagens/produto.png"> <h1 class="descricaoProduto">Produto 01</h1> <h1 class="precoProduto">R$ 900,00</h1> </div> <div id="produto"> <img src="imagens/produto.png"> <h1 class="descricaoProduto">Produto 01</h1> <h1 class="precoProduto">R$ 900,00</h1> </div> <div id="produto"> <img src="imagens/produto.png"> <h1 class="descricaoProduto">Produto 01</h1> <h1 class="precoProduto">R$ 900,00</h1> </div> <div id="produto"> <img src="imagens/produto.png"> <h1 class="descricaoProduto">Produto 01</h1> <h1 class="precoProduto">R$ 900,00</h1> </div> <div id="produto"> <img src="imagens/produto.png"> <h1 class="descricaoProduto">Produto 01</h1> <h1 class="precoProduto">R$ 900,00</h1> </div> </div> </div> <!--INSTAGRAM--> <div id="instagram"> <div id="tituloInstagram"> <img src="imagens/instagramInferior.png"> Instagram feed: #surfhouse </div> <div id="imgInstagram"><img src="imagens/01.png"></div> <div id="imgInstagram"><img src="imagens/02.png"></div> <div id="imgInstagram"><img src="imagens/03.png"></div> <div id="imgInstagram"><img src="imagens/04.png"></div> <div id="imgInstagram"><img src="imagens/05.png"></div> <div id="imgInstagram"><img src="imagens/06.png"></div> </div> </body> </html> CSS: /*HTML*/ *{ margin:0px; padding:0px; font-family:Tahoma, Geneva, sans-serif; font-size:14px; } body{ background-color:#f8f8f8; } /*LINKS*/ a.linkPromocao:link, a.linkPromocao.visited{ background-color:#fff51f; color:#000; float:left; padding:15px 30px; font-size:18px; margin-top:400px; margin-left:-220px; text-decoration:none; } a.linkPromocao:hover{ text-decoration:underline; } a.linkMenu:link, a.linkMenu.visited{ background-color:#26d2fc; width:210px; float:left; text-decoration:none; color:#000; padding:15px 30px; } a.linkMenu:hover{ background-color:#333333; color:#FFF; } a.linkMaisBuscados:link, a.linkMaisBuscados.visited{ background-color:#e9e9e9; color:#000; float:left; padding:15px; margin:5px 5px 0px 0px; font-size:18px; text-decoration:none; font-size:14px; } a.linkEmDestaque:link, a.linkEmDestaque:visited{ color:#CCC; float:left; padding:5px; width:200px; text-decoration:none; } /*DIVs*/ #topo{ width:1500px; height:646px; margin:0px auto; background-image:url(imagens/topo.jpg); } #conteudoEsquerdo{ width:270px; float:left; margin-top:50px; margin-left:150px; } #logo{ background-image:url(imagens/logo.png); width:140px; height:120px; margin:0px auto; } #carrinho{ background-image:url(imagens/carrinho.png); width:270px; height:59px; } #quadroAmarelo{ background-color:#fff51f; height:300px; margin-top:10px; float:left; } #conteudoDireito{ float:right; margin-top:50px; margin-right:220px; width:450px; } #redesSociais{ float:right; } #centralizar{ width:1200px; margin:0px auto; } #widgets{ width:270px; overflow:auto; float:left; } #menu{ width:270px; float:left; } #maisBuscados{ float:left; width:270px; background-color:#FFF; margin-top:15px; } #produtos{ width:920px; float:right; } #produto{ float:left; background-color:#FFF; padding:8px; margin:15px; width:250px; } #instagram{ width:1200px; clear:both; margin:0px auto; background-color:#e8e8e8; overflow:auto; } #tituloInstagram{ width:300px; margin:15px auto; padding:5px; } #imgInstagram{ float:left; background-color:#FFF; margin:10px; } /*CLASSES*/ .totalCarrinho{ font-size:18px; color:#FFFFFF; margin-top:15px; margin-left:100px; float:left; } .itensCarrinho{ float:left; font-size:12px; color:#faef03; margin-left:100px; } .campoP{ background-color:#e9e9e9; border:none; float:left; width:218px; padding:9px; height:16px; } .btnP{ float:left; } .tituloQuadroAmarelo{ font-size:30px; font-weight:normal; margin:50px 10px 25px 20px; float:left; } .textoQuadroAmarelo{ font-size:12px; font-weight:normal; margin:0px 10px 20px 20px; float:left; } .tituloPromocao{ float:left; margin-top:200px; color:#fff51f; font-size:45px; font-weight:normal; } .textoPromocao{ float:left; margin-top:280px; margin-left:-230px; color:#fff51f; font-size:14px; font-weight:normal; width:300px; } .tituloMenu{ background-color:#333333; padding:35px 30px; color:#FFF; } .maisBuscados{ font-size:24px; margin:15px; } .tituloProdutos{ color:#707070; margin-left:30px; margin-top:20px; font-size:28px; } .descricaoProduto{ float:left; margin:5px; } .precoProduto{ float:right; margin:5px; }
