0

Estou querendo passar uma lista que são adicionadas em uma pagina e clicando no botão de remover essa lista(linha) ir para outra pagina(final.html).

function adicionaLinha(idTabela) {
  var tabela = document.getElementById(idTabela);
  var numeroLinhas = tabela.rows.length;
  var linha = tabela.insertRow(numeroLinhas);
  var celula1 = linha.insertCell(0);
  var celula2 = linha.insertCell(1);   
  var celula3 = linha.insertCell(2); 
  celula1.innerHTML = 'Quarto '+ Math.floor((Math.random() * 10) + 1); 
  celula2.innerHTML =  Math.floor((Math.random() * 10) + 1); 
  celula3.innerHTML =  "<button onclick='removeLinha(this)'>Remover</button>";
}

// funcao remove uma linha da tabela
function removeLinha(linha) {
var i=linha.parentNode.parentNode.rowIndex;
document.getElementById('tbl').deleteRow(i);
} 
<!DOCTYPE html>
<html>
<head>
	<title>Buttler</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="css/style.css">
	<link href="https://fonts.googleapis.com/css?family=Open+Sans|Source+Sans+Pro" rel="stylesheet">
</head>
<body>

	<header class="main-container">
		<div>
			<a href="index.html"><img src="img/hotel.jpeg" alt="hotel"></a>

		</div>

		<aside class="menu">
				<ul>
					<li><a href="index.html">PEDIDOS EM ABERTO</a></li>
					<li><a href="pages/final.html">PEDIDOS FINALIZADOS</a></li>
				</ul>

		</aside>
	</header>

	<section class="header-title">

		<div class="main-title">
			<h3>Page aberta</h3>
		</div>

	</section>


	<section class="content">
		<button onclick="adicionaLinha('tbl')">Adicionar</button>
        <table id="tbl" class="tbl">
        <tr>
          <td>N° DO QUARTO</td>
          <td>PEDIDO</td>
          <td>STATUS</td>
        </tr>
        </table> 
	</section>




<script src="main.js"></script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>Buttler</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="../css/style.css">	
	<link href="https://fonts.googleapis.com/css?family=Open+Sans|Source+Sans+Pro" rel="stylesheet">
</head>
<body>

	<header class="main-container">
		<div>
			<a href="../index.html"><img src="../img/hotel.jpeg" alt="hotel"></a>

		</div>

		<aside class="menu">
				<ul>
					<li><a href="../index.html">PEDIDOS EM ABERTO</a></li>
					<li><a href="final.html">PEDIDOS FINALIZADOS</a></li>
				</ul>

		</aside>
	</header>

	<section class="header-title">
		<div class="main-title">
			<h3>Page fechada</h3>
		</div>
	</section>

	<section class="content">
		<table id="tbl" class="tbl">
			<tr>
				<td>N° DO QUARTO</td>
				<td>PEDIDO</td>
				<td>STATUS</td>
			</tr>
			</table> 
	</section>



	<script src="../main.js"></script>
</body>
</html>

1
  • 1
    Estas páginas estão sendo servidas por um servidor, ou é algo estático que você tem na sua máquina?
    – Andre
    10/05/2019 às 19:16

2 Respostas 2

0

Isso provavelmente não dá pra fazer só com javascript. O que você vai ter que fazer é criar um json contendo os dados da primeira página e adicionando um status no objeto que você clicou em remover, como por exemplo:

{ "id" : "10", "quarto" : "5", "removido" : "true" }

Na outra página, você exibe só os objetos desse json cujo removido seja true

1
  • existem diversas outras formas de armazenar os dados no lado do cliente. Citei as mais utilizadas em minha resposta. Criar e armazenar em um arquivo JSON será bastante complexo para ele.
    – user148754
    10/05/2019 às 19:41
0

Você possui diversas possibilidades de passar as informações para a próxima página .html. De acordo com suas tags inseridas na pergunta eu suponho que você não esteja utilizando nenhum backend e somente o frontend "convencional (HTML5, CSS3 e JS)" e irei responder a sua pergunta baseada nisto.

Antes de mais nada eu sugiro que você leia alguns artigos citados abaixo, os quais são convenientes para sua pergunta, assim você pode passar para um próximo nível de conhecimento.

1) CLIENT SIDE

2) COMO O JAVASCRIPT FUNCIONA: O MECANISMO DE RENDERIZAÇÃO

3) ARMAZENAMENTO NA WEB

Geralmente os desenvolvedores inexperientes precisam armazenar qualquer informação e imediatamente pensam em fazer algum tipo de upload para um servidor. Logo o HTML5 mudou isto, existem diversas tecnologias que permitem o armazenamento de dados do lado do cliente. Os dados podem também ser assíncronos ou síncronos de volta para o servidor ou permanecer sempre no cliente (Isto é decisão do desenvolvedor, ou seja, sua!).

Lendo todo o conteúdo acima e sabendo disto, você pode escolher entre muitas técnicas para armazenar dados do lado do cliente, algumas delas são:

1) WEB STORAGE

2) SQLITE

3) BANCO DE DADOS INDEXADOS (IndexedDB)

Pelo o que eu entendi com sua pergunta não muito detalhada e o seu modo de estruturação, code clean e boas práticas estou supondo que você está fazendo isto para aprendizagem, então eu sugiro que utilize o WEB STORAGE para tal.

Siga as documentações e leia os artigos o qual eu encaminhei que você conseguirá fazer e irá subir de nível de conhecimento.

DICA:

Na primeira página onde você gera as informações, ao gerá-las salve no WEB STORAGE (Você pode escolher entre SessionStorage e LocalStorage, isto depende do que você realmente quer). Logo na segunda página onde você quer exibir as informações salvas, você recupera os dados armazenados no WEB STORAGE.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .