Ir para conteúdo
Fórum Script Brasil
  • 0

Inserir e Excluir dados com JavaScript

danielvizoli

Perguntado por danielvizoli,

 Share

Pergunta

danielvizoli

danielvizoli

Postado
Postado

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;    
}

 

Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 0
danielvizoli

danielvizoli

Postado
  • Autor
Postado

Fala galera, achei um exemplo mais simples de base, queria a mesma ideia porem excluindo a linha e com um form para adicionar mais uma com dados que eu digitar.

 

[codeblock]

<html>
<body>

<script>
function hideRow (rowIndex) {
var table = document.all ? document.all.aTable :
document.getElementById('aTable');
table.rows[rowIndex].style.display = 'none';
}
function showRow (rowIndex) {
var table = document.all ? document.all.aTable :
document.getElementById('aTable');
table.rows[rowIndex].style.display = '';
}
</SCRIPT>


<FORM>
<SELECT NAME="rowIndex">
<script>
for (var i = 1; i < 5; i++)
document.write('<OPTION VALUE="' + i + '">' + i);
</SCRIPT>
</SELECT>
<INPUT TYPE="button" VALUE="esconder linha" ONCLICK="hideRow(this.form.rowIndex.selectedIndex);">
<INPUT TYPE="button" VALUE="mostrar linha" ONCLICK="showRow(this.form.rowIndex.selectedIndex);">
</FORM>

<table width="100%"  border="0" id="aTable">
 <tr id="1">
   <td>LINHA 1 </td>
   <td>AAAAAAAAAAAAAAAAAAAA</td>
   <td>AAAAAAAAAAAAAAAAAAAAAAA</td>
 </tr>
 <tr id="2">
   <td>LINHA 2 </td>
   <td>BBBBBBBBBBBBBBBBBBBBBB</td>
   <td>BBBBBBBBBBBBBBBBBBBBBBBBB</td>
 </tr>
 <tr id="3">
   <td>LINHA 3 </td>
   <td>CCCCCCCCCCCCCCCCCCCC</td>
   <td>CCCCCCCCCCCCCCCCCCCCCCC</td>
 </tr>
 <tr id="4">
   <td>LINHA 4 </td>
   <td>DDDDDDDDDDDDDDDDDDDD</td>
   <td>DDDDDDDDDDDDDDDDDDDDDDD</td>
 </tr>
</table>
</body>
</html>

[/codeblock]

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,5k
    • Posts
      652,4k
×
×
  • Criar Novo...