Добавление новых строк в таблицу при перемещении между страницами

Question

Я пытаюсь создать небольшой проект html, где люди могут делать оговорки в кинотеатре, выбирая фильм и места, а затем, нажав кнопку PAY, появится новая страница суммирования их резервирование, и после нажатия кнопки SAVE их резервирование должно отображаться в виде новой строки в таблице резервирования.

Так что у меня возникают трудности с добавлением новых строк на страницу таблицы, когда на предыдущей странице нажата кнопка (на самом деле ссылка на новую страницу).

Вот таблица часть моей страницы заказов (вложенная внутри сОн тела, конечно):

<table style="border:1px solid black; width:1000px;" id="table"> 
    <tr bgcolor=#262673 id="tr1" > 
      <td align=center style="color:white; font-size:30px;"><b>Movie Name</b> </td> 
      <td align=center style="color:white; font-size:30px"><b>Number Of Seats</b> </td> 
      <td align=center style="color:white; font-size:30px"><b>Credit Card Type </b></td> 
    </tr> 
</table> 

Вот ссылка на предыдущей странице под названием «платить»:

<a href='myorders.html' onclick="Save();" id="link" ><img src='sobutton.png' height=40 align="right" ></a> 

и здесь является моим файлом jquery.js, связанным со страницей заказов:

if (typeof (Storage) !== "undefined") { 
$(document).ready(function() { 

    var prev = sessionStorage.getItem("toBeAppended"); // if nothing to append (if it's first time) then prev = null 
    if (prev == null) 
     prev = " "; // if prev == null, assign to it: " " (space) value 
    var numOfSeats = JSON.parse(sessionStorage.getItem('checked')).length; 
    var card = sessionStorage.getItem("CardName"); 
    var movie = sessionStorage.getItem("moviename"); 
    var new1 = "<tr><td>" + movie + "</td><td>" + numOfSeats + "</td><td>" + card + "</td></tr>"; 
    var oldPlusNew = prev+new1; 
    $("#table").addClass("TABLE"); 
    $("#table").append(oldPlusNew); 
    sessionStorage.setItem("toBeAppended", oldPlusNew); 
}); 
} 

, пожалуйста, игнорируйте разделы sessionstorage. Проблема заключается в том, что всякий раз, когда загружается страница «оплата», строка добавляется на страницу заказов, а когда загружается страница заказов, происходит одно и то же, поэтому, когда я нажимаю кнопку «СОХРАНИТЬ», чтобы перейти на страницу заказов со страницы оплаты, я вижу одна и та же строка дважды, а не только один раз. Я не знаю, почему это происходит, поэтому, если кто-то хочет помочь мне, я буду признателен.

PS файл Jquery только связан с страницей заказов, а не платить страницу

Кроме того, люди имеют возможность выбирать тип кредитной карты флажка, и я не могу показаться, чтобы получить значение выбранного варианта.

Answer 1

В ответ на ваш второй вопрос:

<select id="mySelect"> 
       <option value="AmericanExpress">American Express</option> 
       <option value="Discover">Discover</option> 
       <option value="Visa">Visa</option> 
      </select> 

Чтобы установить выбранный параметр в sessionStorage:

sessionStorage.setItem("CardName", document.getElementById("mySelect").value); 

Чтобы получить значение на другой странице:

var card = sessionStorage.getItem("CardName");