Question

我在尝试什么：

我点击按钮继续将我带到另一个html页面。
然后我根据我的数组创建一个动态表。

但是页面不显示表格。注意：我想通过JS实现这一点，而不是Jquery或任何其他框架。

代码：

当我按下Proceed按钮

function Proceed(){

    window.location.href = '\cart.html';

    function addItems(){

        var cartTable = document.createElement("table");

        var tr1 = document.createElement("tr");

        tr1.appendChild(createElement("td"));
        tr1.appendChild(createElement("td"));
        tr1.appendChild(createElement("td"));

        tr1.cells[0].appendChild( document.createTextNode('Sr. Number'));
        tr1.cells[0].appendChild( document.createTextNode('Item'));
        tr1.cells[0].appendChild( document.createTextNode('Price'));

        cartTable.appendChild(tr1);

        for(i=0; i<cartCount; i++){

            var cartItem = myCart[i];

            var tr = document.createElement("tr");

            tr.appendChild(createElement("td"));
            tr.appendChild(createElement("td"));
            tr.appendChild(createElement("td"));

            tr.cells[0].appendChild( document.createTextNode(i+1));
            tr.cells[0].appendChild( document.createTextNode(cartItem.Name));
            tr.cells[0].appendChild( document.createTextNode(cartItem.Price));

            cartTable.appendChild(tr);

        }

        document.getElementByID(finalCart).innerHTML = cartTable;
    }
}

Answer 1

您无法离开页面，然后继续在刚离开的页面上运行脚本。

相反，您可以先生成新页面的html，然后将其转换为您可以重定向或链接到的dataURI。（由于这是在一个SO片段内，我无法定位新窗口或自动重定向到它，所以我只是生成一个直接链接;在现实生活中你不会有这个限制。）

＆＃13;

function Proceed() {

  /* since this is all going to be converted to a string anyway,
  it would be easier to just create the html as a string instead
  of using DOM methods. In the interest of not mucking around too 
  much with your existing code I'm leaving that as is and then 
  extracting the html string with .outerHTML. */

  var cartTable = document.createElement("table");
  var tr1 = document.createElement("tr");
  tr1.appendChild(document.createElement("td"));
  tr1.appendChild(document.createElement("td"));
  tr1.appendChild(document.createElement("td"));
  tr1.cells[0].appendChild(document.createTextNode('Sr. Number'));
  tr1.cells[1].appendChild(document.createTextNode('Item'));
  tr1.cells[2].appendChild(document.createTextNode('Price'));

  cartTable.appendChild(tr1);
  /* Etcetera for remainder of table */

  // create the data URI:
  var generatedLink = "data:text/html;base64," + window.btoa(cartTable.outerHTML);

  // create a link to it:
  document.getElementById('output').innerHTML = "<a href='" + generatedLink + "'>Go to generated page</a>";
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="Proceed()">Generate Link</button>

<div id="output"></div>

＆＃13;

（毫无疑问，您可能最好将此服务器端生成为普通的HTML页面，但如果您需要留在客户端，这应该可行。）

Javascript重定向到页面并动态修改它

1 个答案: