我遇到了JavaScript问题。当我推动"添加"按钮我想用表单中的列表创建一个表。
所以例如: 新课程:名称:A,内容:B =>添加
|name|content
| A | B
每一条新记录都会出现在桌面的末尾。 你知道我该怎么办?使用PHP我会很容易,但我想用JavaScript做。
我的想法是将此代码添加到脚本中: 文件。 addEventListener(' DOMContentLoaded',registerCallbacks); function registerCallbacks(){var addButton = document.getElementById(' add'); addButton.addEventListener(' click',function(evt){add(); evt.preventDefault();});
document.addEventListener('DOMContentLoaded', registerCallbacks);
function registerCallbacks() {
var addButton = document.getElementById('add‘ ); addButton.addEventListener( '
click ', function( evt ){ add( ); evt.preventDefault( ); } );

<html>
<body>
<form id="new">
<label for="name">Name of lecture: <br>
<input class="text" type="text" id="name"></input><br>
<label for="content">Content: <br>
<textarea class="text" id="content"></textarea><br>
<button id="add"> Add </button>
</form>
<script>
</script>
</body>
</html>
&#13;
答案 0 :(得分:3)
所以第一步是激活按钮:
// Here we call the function Add() if someone clicks the button.
<button id="add" onclick="Add()"> Add </button>
现在我们要将Javascript函数Add()添加到我们的脚本中:
function Add() {
// We request here all the information what the user fill out.
}
所以这是一个工作片段:
let table = document.getElementById("table");
function Add() {
// We request here all the information what the user fill out.
let name = document.getElementById("name").value,
content = document.getElementById("content").value;
// Add to table
table.innerHTML += "<tr><td>" + name + "</td><td>" + content + "</td></tr>"
}
&#13;
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 3px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
&#13;
<label for="name">Name of lecture: <br>
<input class="text" type="text" id="name"><br>
<label for="content">Content: <br>
<textarea class="text" id="content"></textarea><br>
<button id="add" onclick="Add()"> Add </button>
<table id="table">
<tr>
<th>Lecture</th>
<th>Content</th>
</tr>
</table>
&#13;
答案 1 :(得分:1)
希望这会起作用
$(document).ready(function() {
$("#add").click(function(){
var name=document.getElementById("name").value;
var content=document.getElementById("content").value;
$("#table").find('tbody').append("<tr><td class='column'>"+name+"</td><td class='column'>"+content+"</td></tr>");
});
});
&#13;
<html>
<head>
<title>Add New Row</title>
<script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.head {
border: 1px solid ;
background:#AEB6BF;
}
.column {
border: 1px solid ;
background:#EAEDED;
}
</style>
</head>
<body>
<label for="name">Name of lecture: <br>
<input class="text" type="text" id="name"></input><br>
<label for="content">Content: <br>
<textarea class="text" id="content"></textarea><br>
<button id="add"> Add </button>
<table id="table" class="head">
<thead>
<tr>
<td>Name</td>
<td>Content</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
</script>
</body>
</html>
&#13;
答案 2 :(得分:0)
这是实现它的一种方法:
var add_button = document.getElementById("add");
var name_field = document.getElementById("name");
var content_field = document.getElementById("content");
var table = document.getElementById("table");
add_button.addEventListener("click", function(e) {
e.preventDefault();
table.style = "display: block;";
table.innerHTML += "<tr><td>" + name_field.value + "</td><td>" + content_field.value + "</td></tr>"
});
<head>
<title>HTML Formular Table</title>
</head>
<body>
<form id="new">
<label for="name">Name of lecture: <br>
<input class="text" type="text" id="name"></input><br>
<label for="content">Content: <br>
<textarea class="text" id="content"></textarea><br>
<button id="add"> Add </button>
</form>
<table id="table" style= "display: none;">
<tr>
<th>Name</th>
<th>Content</th>
</tr>
</table>