怎么才能實作點擊提交就把資訊加在表格后面并且判斷是否輸入了數字或者文字？
uj5u.com熱心網友回復：
吧你要添加的地方加一個calss 找到這個class xxx.appendChild()在這個dom元素后面添加你所輸入的內容就可以,判斷是否是數字或文字,就使用正則, /^\d*$/.test(這里是你輸入的內容) 大概就這樣uj5u.com熱心網友回復：
1.首先給提交按鈕添加點擊事件：
document.querySelector("#btn).onclick = function() {
2.分別獲取各個表單的值，如學號
const num = document.querySelector("#ids");
3.判斷表單內容是否符合要求,如判斷學號是否為空
if (!num.value) {
為空則不往下執行
return false;
}
4.所有表單都符合條件，獲取表格的tbody
const tbody = document.querySelector("table tbody");
5.要追加在表格最正面一行的資料
const tr = "<tr>"
+ "<td>" + 學號 + "</td>"
+ "<td>" + 姓名+ "</td>"
+ "<td>" + 年齡 + "</td>"
+ "<td>" + 班級 + "</td>"
+ "</tr>";
6.把資料添加到表格
tbody.append(tr);
}
uj5u.com熱心網友回復：
document.querySelector("#btn")少了個雙引號
uj5u.com熱心網友回復：
<input type="text" id="ids" placeholder="學號">
<input type="number" id="ages" placeholder="年齡">
<input type="text" id="names" placeholder="姓名">
<input type="text" id="cla" placeholder="班級">
<input type="button" value="https://bbs.csdn.net/topics/提交" onclick="submit()">
<table>
<thead>
<th>學號</th>
<th>姓名</th>
<th>年齡</th>
<th>班級</th>
</thead>
<tbody id="tbody"></tbody>
</table>
<script>
var ids= document.getElementById('ids'),
names = document.getElementById('names'),
ages = document.getElementById('ages'),
cla = document.getElementById('cla'),
tbody = document.getElementById('tbody')
function submit () {
if (!ids.value || !names.value || !ages.value || !cla.value) {
alert('必填項為空')
return
}
tbody.innerHTML += `<tr><td>${ids.value}</td><td>${names.value}</td><td>${ages.value}</td><td>${cla.value}</td></tr>`
ids.value = ''
names.value = ''
ages.value = ''
cla.value = ''
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/114133.html
標籤：JavaScript