在页面之间移动时向表中添加新行答案

【问题标题】：Adding new rows to table when moving between pages在页面之间移动时向表中添加新行
【发布时间】：2016-05-05 16:56:44
【问题描述】：

我正在尝试创建一个小型 html 项目，人们可以在其中通过选择电影和座位来预订电影院，然后通过单击 PAY 按钮显示一个新页面来汇总他们的预订，然后单击 SAVE 按钮点击后，他们的预订应在预订表中显示为新行。

因此，每当在上一页中单击按钮（实际上是指向新页面的链接）时，我都难以将新行添加到表格页面。

这是我的订单页面的表格部分（当然是嵌套在 div 正文中）：

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

请忽略会话存储部分。问题是，每当加载“支付”页面时，订单页面就会添加一行，并且在加载订单页面时也会发生同样的事情，所以当我单击“保存”按钮从支付页面移动到订单页面时，我看到了同一行两次，而不是一次。我不知道为什么会这样，所以如果有人愿意帮助我，我会很感激。

P.S jQuery 文件只链接到订单页面而不是支付页面

此外，人们有机会从复选框中选择信用卡类型，但我似乎无法检索所选选项的值。

【问题讨论】：

标签： javascript jquery html-table row

【解决方案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");

【讨论】：