javascript - 提交表单后如何动态添加到表中

标签 javascript html

这是我目前的代码,我如何更改当前代码所以我可以在提交后从表单输入数据然后添加到下表中,我知道我需要使用 JS 做更多的事情来实现这一点,但是在网上找不到任何可以帮助我完成我想做的事情

编辑:我试图完成什么,我似乎无法找到在线资源来帮助我,确切地说,当我输入电影名称和日期时,提交值后应将其放入表单下方的表格中

<html>
<head>      
<title>Movie Details</title>
<script type="text/javascript">
function movieName(){
    var name = document.getElementById("movie").value;

    if (true)
    {
        alert(name);
    }
}

function date(){
    var released = document.getElementById("dateRelease").value;

    if (true)
    {
        alert(released);
    }
}
</script>

</head>
<body>

<div id="add">

    <form name="movieAdd" method="GET">

        <fieldset>

            <legend>Movie Details</legend>

            <p>
                <label for="movie">Movie Name:</label>
                <input type="text" required placeholder="Movie Name"             name="movie" id="movie"/>
            </p>

            <p>
                <label for="date">Date Released:</label>
                <input type="date" required name="date" id="date"/>
            </p>

        </fieldset>

        <p>
            <input type="submit" name="submitButton" value="Submit">
        </p>
    </form>
</div>

<table id="movieTable" width="350px" border="1">
<tr>
    <th>Number</th>
    <th>Movie Name</th>
    <th>Date Released</th>
</tr>
</table>
</body>
</html>

最佳答案

我建议使用 jQuery (http://jquery.com/)。您可以使用它轻松地从表单中选择元素,例如:

var movie = $('#movie').val();

然后,您可以轻松地在表格行中附加必要的数据,例如:

var $td = $('<td>').text(movie);
$('#movieTable').append($td);

我希望这能为您指明正确的方向。

关于javascript - 提交表单后如何动态添加到表中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36685503/

相关文章:

javascript - react-native-modalbox 卡在子组件上下文中

javascript - Material 用户界面 : Table scroll to top of new page

javascript - 如何使当前页面的动画链接带有下划线?

html - 移动景观的媒体查询

javascript - 将图像添加到元素

javascript - vuejs - 提交 axios 表单后显示警报和重定向

javascript - Knockout Sortable 中的 connectClass 是什么?

javascript - 在 TypeScript 中分配 DOM 对象

javascript - 如何将嵌入式按钮添加到链接到相同网站页面的新 Google 协作平台 [2018]?

html - 将文本框自动调整为 div 中的文本