Pass a list to another page - javascript

Asked

Viewed 93 times

0

I am wanting to pass a list that are added on a page and clicking the remove button from that list(line) go to another page(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>

javascript html5 javascript-events
  • 1

    These pages are being served by a server, or is it something static that you have on your machine?

2 answers

0

This probably can not do only with javascript. What you will have to do is create a json containing the data from the first page and adding a status to the object you clicked on remove, for example: 

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

On the other page, you only see the objects of this json whose removido be it true

  • there are several other ways to store the data on the client side. I have cited the most used ones in my reply. Creating and storing in a JSON file will be quite complex for it.

0

You own various possibilities of pass the information to the next page .html. According to your tags inserted in the question I assume you are not using any backend and only the frontend "conventional (HTML5, CSS3 and JS)" and I will answer your question based on this.

First of all I suggest you read some articles cited below, whom are convenient for your question, so you can move on to a next level of knowledge.

1) CLIENT SIDE

2) HOW JAVASCRIPT WORKS: THE RENDERING ENGINE

3) WEB STORAGE

Usually the inexperienced developers need to store any information and immediately think about doing some kind of upload to a server. Soon the HTML5 changed this, there are several technologies that allow the storage of customer-side data. The data may also be asynchronous or synchronous back to the server or always remain in the client (This is the decision of the developer, ie your!).

Reading all the above content and knowing it, you can choose between many techniques for store client side data, some of them are:

1) WEB STORAGE

2) SQLITE

3) INDEXED DATABASE (Indexeddb)

From what I understand with your not very detailed question and your structuring mode, code clean and good practices I’m guessing you’re doing this for learning, so I suggest you use the WEB STORAGE for such.

Follow the documentation and read the articles I have forwarded that you will be able to do and will rise to the level of knowledge.

TIP:

In the front page where you generate the information, when generating it save in WEB STORAGE (You can choose between Sessionstorage and Localstorage, it depends on what you really want). Just in the second page where you want to display the saved information, you recover data stored on WEB STORAGE.

Browser other questions tagged javascript html5 javascript-events

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