时间戳

首页 > 解决方案 > 如何在不使用 php 的情况下提交 html 表单数据并将其传递到另一个由 table 组成的 html 页面？

html - 如何在不使用 php 的情况下提交 html 表单数据并将其传递到另一个由 table 组成的 html 页面？

问题描述

我创建了简单的 html 页面“output.html”，它由表格和一个输入按钮“添加”组成。

<html>
<head>
<style>
table {
        font-family: Arial, sans-serif;
        border-collapse: collapse;
        width:70%;
    }
    td,th{
        border:1px solid #dddddd;
        text-align:left;
        padding: 8px;
    }
</style>
</head>
<body>
    <center><h2>Employee Task Record</h2>
    <input type="button"  onclick="location.href='input.html';" value="Add" button class="button">
    <br><br>
        </body>
        <table>
        <tr>
    <th>Given Task</th>
    <th>Complete</th>
    <th>Task Type</th>
        </tr>
    </table>
</center> 
</body>
</html>

在此处输入图像描述 当我单击添加按钮时，它会打开 html 表单“input.html”。

<html>
<body>
<div>
<center>
<form method="post" action="output.html">
Given Task : <input type="text" name="task"><br><br>
Complete: <input type="radio" name="taskDone" value="yes" checked> Yes 
<input type="radio" name="taskDone" value="no"> No<br> <br> 
Task Type: <select>
<option value="Meeting">Meeting</option>
<option value="coding">Coding</option>
<option value="documentation">Documentation</option>
</select> <br> <br>
<input type="submit">
</form>
</center></div></body>
</html>

在此处输入图像描述

现在，当我在 input.html 中提交表单时，我想在我创建表的 output.html 中显示输出。示例输出如下所示。我希望以相同格式在表中输出，如下所示。 在此处输入图像描述

标签： html

解决方案

如果没有像 PHP 这样的服务器端语言，你就无法做到这一点。您可以做的最接近的事情是在同一个页面（输入和输出）中执行此操作并使用 js 添加行（更改 DOM），但是每次重新加载页面时，您都会丢失所有更改。

推荐阅读