表格动态添加和删除使用原生js
要求
1.严格使用素材所给布局
2.必须使用表单提交事件
3.必须将输入的数据存储在数组中，根据数组渲染表格内容
4.删除行的时候，必须将数组中数据也进行删除，不允许出现点击一次按钮，表格中出现多个行的场景
5.仅限使用原生js
6.对表单元素各项都有验证
- 游戏名称为4~10个汉字
- 开发公司必选
- 适用人群必选
- 游戏类别必选
- 游戏描述必填
- 将数据展示在表格中
- 实现删除功能
- 添加后清空表单元素
基本布局
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格动态添加和删除title>
head>
<body>
<form action="http://www.baidu.com">
<table>
<caption>
<h2>表格添加h2>
caption>
<tbody>
<tr>
<td>游戏名称：td>
<td><input type="text" name="gamename">td>
tr>
<tr>
<td>开发公司：td>
<td>
<input type="radio" name="company" value="腾讯">腾讯
<input type="radio" name="company" value="暴雪">暴雪
<input type="radio" name="company" value="网易">网易
<input type="radio" name="company" value="任天堂">任天堂
td>
tr>
<tr>
<td>适用人群：td>
<td>
<input type="checkbox" name="people" value="小学生">小学生
<input type="checkbox" name="people" value="大学生">大学生
<input type="checkbox" name="people" value="白领">白领
<input type="checkbox" name="people" value="老年人">老年人
td>
tr>
<tr>
<td>游戏类别：td>
<td>
<select name="kind">
<option value="0">请选择游戏类别option>
<option value="益智类">益智类option>
<option value="动作类">动作类option>
<option value="冒险类">冒险类option>
<option value="策略类">策略类option>
<option value="模拟类">模拟类option>
select>
td>
tr>
<tr>
<td>游戏描述：td>
<td>
<textarea name="detail" cols="30" rows="10">textarea>
td>
tr>
<tr>
<td>td>
<td>
<input type="reset">
<input type="submit" value="添加">
td>
tr>
tbody>
table>
form>
<table width=800 border=1>
<caption>
<h2>表格展示h2>
caption>
<thead>
<tr>
<th>游戏名称th>
<th>开发公司th>
<th>适用人群th>
<th>游戏类别th>
<th>游戏描述th>
<th>操作th>
tr>
thead>
<tbody>tbody>
table>
body>
html>
邀请回答才收到，这边已经有人贴答案了，还需要我们继续么？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格动态添加和删除</title>
<script>
(function(){
})()
window.onload = function(){
document.querySelector('input[type=button]').onclick = function(){
// 同样，多个 form ，自行修改选择器
frm = document.querySelector('form')
// 自行修改提示，验证我只做简单的是否填值了，正则长度之类的我就不写了
data = {
'gamename': frm['gamename'].value
,'company': frm['company'].value
,'people':(function(){
people = ''
frm['people'].forEach(function(el){
if (el.checked)
{
people += ',' + el.value
}
})
return people.substr(1)
})()
,'kind': (function(){
if (frm['kind'].selectedIndex > 0)
{
return frm['kind'].options[frm['kind'].selectedIndex].value
}
return ''
})()
,'detail': frm['detail'].value
}
//console.log(check)
// 自行添加验证
if (!data.gamename)
{
alert('名字')
return
}
if (!data.company)
{
alert('公司')
return
}
if (!data.people)
{
alert('人群')
return
}
if (!data.kind)
{
alert('类型')
return
}
if (!data.detail)
{
alert('评价')
return
}
// 如果有多个 table 自行修改 querySelector 的选择器
tb = document.querySelector('form ~ table');
var tr = document.createElement('tr')
tb.append(tr)
for (var k in data)
{
var td = document.createElement('td')
td.innerText = data[k]
tr.append(td)
}
var td = document.createElement('td')
td.innerText = '删除'
tr.append(td)
td.onclick = function(){
if (confirm('确定删除？'))
{
this.parentNode.remove()
}
}
frm.reset()
}
}
</script>
</head>
<body>
<form action="http://www.baidu.com">
<table>
<caption>
<h2>表格添加</h2>
</caption>
<tbody>
<tr>
<td>游戏名称：</td>
<td><input type="text" name="gamename"></td>
</tr>
<tr>
<td>开发公司：</td>
<td>
<label><input type="radio" name="company" value="腾讯">腾讯</label>
<label><input type="radio" name="company" value="暴雪">暴雪</label>
<label><input type="radio" name="company" value="网易">网易</label>
<label><input type="radio" name="company" value="任天堂">任天堂</label>
</td>
</tr>
<tr>
<td>适用人群：</td>
<td>
<label><input type="checkbox" name="people" value="小学生">小学生</label>
<label><input type="checkbox" name="people" value="大学生">大学生</label>
<label><input type="checkbox" name="people" value="白领">白领</label>
<label><input type="checkbox" name="people" value="老年人">老年人</label>
</td>
</tr>
<tr>
<td>游戏类别：</td>
<td>
<select name="kind">
<option value="0">请选择游戏类别</option>
<option value="益智类">益智类</option>
<option value="动作类">动作类</option>
<option value="冒险类">冒险类</option>
<option value="策略类">策略类</option>
<option value="模拟类">模拟类</option>
</select>
</td>
</tr>
<tr>
<td>游戏描述：</td>
<td>
<textarea name="detail" cols="30" rows="10"></textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="reset">
<input type="button" value="添加">
</td>
</tr>
</tbody>
</table>
</form>
<table width=800 border=1>
<caption>
<h2>表格展示</h2>
</caption>
<thead>
<tr>
<th>游戏名称</th>
<th>开发公司</th>
<th>适用人群</th>
<th>游戏类别</th>
<th>游戏描述</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>
- 这个问题的回答你可以参考下: https://ask.csdn.net/questions/229727
- 你也可以参考下这篇文章：原生js判断字符串中出现次数最多的元素，并统计次数
- 除此之外, 这篇博客: js逆向之猿人学-反混淆刷题平台第十题中的 这题应该是刷题平台中js逆向部分最难的一道题目了，而且它跟著名的某数有关系，做完这题后，你也可以说算是与某数有过接触了，本题需要破解的参数其实就是某数当中的MmEwMD，这里先说一下， 本题不会手把手每一步都讲的那么仔细，但是会带大家走一遍抠码的环节，有坑的地方呢就提及一下，至于有些地方为什么这样，又如何解决还是需要各位自己思考的，毕竟做题本身就是为了提高自己，如果什么都说了，都做了，那就失去了做题的意义了，好了话不多说，下面直接开始分析。 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
（提示：这题打开开发者工具后会非常的卡，特别是电脑配置不高的，所以调试的时候请耐心并且多做记录，记住调试过和当前调试到的位置，如调试过程中卡主了，可以关掉网页重新打开，然后快速回到自己刚才调试的地方）
- 您还可以看一下 程张浩老师的原生JS贪吃蛇游戏实战开发课程中的 贪吃蛇游戏界面及原理小节, 巩固相关知识点
以下答案由GPT-3.5大模型与博主波罗歌共同编写：
好的，这里是实现表格动态添加和删除的原生JS代码，代码中加入了对表单元素的各项验证。
```
var gamelist = []; // 定义数组存储游戏列表数据
window.onload = function() {
var form = document.querySelector('form');
var table = document.querySelector('table tbody');
// 当表单提交时执行add函数
form.addEventListener('submit', add, false);
// 当删除按钮点击时执行del函数
table.addEventListener('click', del, false);
}
// 添加游戏的函数
function add(e) {
e.preventDefault(); // 禁止表单的默认行为
var gamename = this.gamename.value.trim();
var company = this.company.value ? this.company.value : null;
var people = getCheckedValues(this.people);
var kind = this.kind.value !== '0' ? this.kind.value : null;
var detail = this.detail.value.trim();
// 进行表单验证
if (!gamename || gamename.length > 10) {
alert('游戏名称为1~10个汉字！');
return;
}
if (!company) {
alert('请选择开发公司！');
return;
}
if (!people.length) {
alert('请选择适用人群！');
return;
}
if (!kind) {
alert('请选择游戏类别！');
return;
}
if (!detail) {
alert('请填写游戏描述！');
return;
}
// 将数据存入数组
gamelist.push({
gamename: gamename,
company: company,
people: people,
kind: kind,
detail: detail
});
// 渲染表格
renderTable();
// 清空表单
this.reset();
}
// 获取多选框的选中值
function getCheckedValues(els) {
var arr = [];
for (var i = 0, len = els.length; i < len; i++) {
if (els[i].checked) {
arr.push(els[i].value);
}
}
return arr;
}
// 删除游戏的函数
function del(e) {
if (e.target.tagName.toLowerCase() === 'a' && e.target.innerText === '删除') {
var index = e.target.parentElement.parentElement.dataset.index; // 获取要删除行的下标
// 从数组中删除对应数据
gamelist.splice(index, 1);
// 渲染表格
renderTable();
}
}
// 渲染表格的函数
function renderTable() {
var tbody = document.querySelector('table tbody');
var html = '';
gamelist.forEach(function(item, index) {
html += '' + item.gamename + '' + item.company + '' + item.people + '' + item.kind + '' + item.detail + '删除';
});
tbody.innerHTML = html;
}
``
// 获取表格元素
var table = document.querySelector('table');
// 获取表单元素
var form = document.querySelector('form');
// 获取表格中的tbody元素
var tbody = table.querySelector('tbody');
// 定义数据数组，用于存储表格中的数据
var data = [];
// 添加表单提交事件处理函数
form.addEventListener('submit', function(event) {
// 阻止表单默认提交行为
event.preventDefault();
// 获取表单元素的值
var gameName = form.elements.gamename.value.trim();
var company = form.elements.company.value.trim();
var people = Array.from(form.elements.people).filter(function(item) {
return item.checked;
}).map(function(item) {
return item.value;
});
var kind = form.elements.kind.value.trim();
var detail = form.elements.detail.value.trim();
// 验证表单元素的值
if (!gameName) {
alert('游戏名称不能为空！');
return;
}
if (!company) {
alert('开发公司不能为空！');
return;
}
if (people.length === 0) {
alert('适用人群不能为空！');
return;
}
if (kind === '0') {
alert('请选择游戏类别！');
return;
}
if (!detail) {
alert('游戏描述不能为空！');
return;
}
// 将表单数据存入数组中
var item = {
gameName: gameName,
company: company,
people: people.join(','),
kind: kind,
detail: detail
};
data.push(item);
// 渲染表格中的数据
renderTable();
// 清空表单元素的值
form.reset();
});
// 添加表格点击事件处理函数
table.addEventListener('click', function(event) {
// 判断点击的是否为删除按钮
if (event.target.classList.contains('delete-btn')) {
// 获取点击的删除按钮所在的行
var row = event.target.parentElement.parentElement;
// 从数据数组中删除对应的数据
var index = row.rowIndex - 1;
data.splice(index, 1);
// 从表格中删除对应的行
tbody.removeChild(row);
}
});
// 渲染表格中的数据
function renderTable() {
// 清空表格中的数据
tbody.innerHTML = '';
// 遍历数据数组，渲染表格中的数据
data.forEach(function(item) {
var row = document.createElement('tr');
row.innerHTML = `
<td>${item.gameName}</td>
<td>${item.company}</td>
<td>${item.people}</td>
<td>${item.kind}</td>
<td>${item.detail}</td>
<td><button class="delete-btn">删除</button></td>
`;
tbody.appendChild(row);
});