javascript - 使用javascript将数组数据发送到另一个页面？

Question

我想使用 javascript 将数据发送到另一个页面。我将使用带有 Onclick 功能的“下一步”按钮。我希望当我单击该按钮时，该页面上文本框中的所有数据都将发送到使用 JavaScript 的另一个页面上显示。

<table border="1" id="bill_table" width="50%" align="center" style="border-collapse: collapse" cellspacing="3" cellpadding="5">
    <tr style="display:none;">
        <td class="style2">&nbsp;</td>
        <td class="style2">
            <div id="name_div">
                <input name="item[]" type="text" id="item" size="20" style="width:100px;"/>
            </div>
        </td>
        <td class="style2">
            <input name="job[]" type="text" id="job" size="20" style="width:100px;"/>
        </td>
        <td class="style2">
            <div id="relation_div">
                <input name="rate[]" type="text" id="rate" size="20" style="width:100px;"/>
            </div>
        </td>
        <td class="style2">&nbsp;</td>
    </tr>
    <tr>
        <td class="style2">SNo</td>
        <td class="style2">Item</td>
        <td class="style2">Job Charges</td>
        <td class="style2">Rate</td>
        <td class="style2">
            <input name="add_button" type="button" id="add_button" size="20" value="Add" style="width:50px" />
        </td>
    </tr>
</table>
<p align="center">
    <input name="Submit1" type="submit" value="submit" />
</p>

和我目前使用的 JavaScript:-

var itemCount = 0;
$(document).ready(function() {
  var objs = [];
  var temp_objs = [];
  $("#add_button").click(function() {
    var html = "";

    var obj = {
      "ROW_ID": itemCount,
      "Item": $("#item").val(),
      "JOB": $("#job").val(),
      "Rate": $("#rate").val(),
    }

    $("#item").val('');
    $("#job").val('');
    $("#rate").val('');

    // add object
    objs.push(obj);
    itemCount++;

    // dynamically create rows in the table
    html = "<tr id='tr" +
      itemCount + "'>" + "<td>" +
      itemCount + "</td>" +
      "<td><INPUT type='text' name='txt1[]' readonly  value='" +
      obj['Item'] + "'/></td>" +
      "<td><INPUT type='text' name='txt2[]' readonly  value='" +
      obj['JOB'] + "'/></td>" +
      "<td><INPUT type='text' readonly    name='txt3[]' value='" +
      obj['Rate'] + "'/></td>" +
      "<td><input type='button'  id='" +
      itemCount +
      "' value='remove'>" +
      "</td> </tr>";

    //add to the table
    $("#bill_table").append(
        html)

      // The remove button click
    $("#" + itemCount).click(
      function() {
        var buttonId = $(this)
          .attr("id");

        //write the logic for removing from the array
        $("#tr" + buttonId).remove();
      });
  });
});

Answer 1

您可以使用 Jquery 序列化功能并重定向到下一页，如下所示

 $("form").serialize()

例如，您的表单包含此内容

 <form action="">
   First name: <input type="text" name="FirstName" value="Mickey"><br>
   Last name: <input type="text" name="LastName" value="Mouse"><br>
</form>

所以序列化后你会得到

 FirstName=Mickey&LastName=Mouse

然后像这样使用window.location

 window.location="youNextPage.html?"+YourSerializedData