JS(JavaScript)事件处理(事件绑定)趣味案例


天行健,君子以自强不息;地势坤,君子以厚德载物。


每个人都有惰性,但不断学习是好好生活的根本,共勉!


文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。


谁家玉笛暗飞声,散入春风满洛城。
此夜曲中闻折柳,何人不起故园情。
——《春夜洛城闻笛》


文章目录

  • JS(JavaScript)事件处理(事件绑定)趣味案例
    • 1. 创建表格
      • 1.1 示例代码
      • 1.2 页面效果
    • 2. 创建表单
      • 2.1 示例代码
      • 2.2 页面效果
    • 3. 添加样式
      • 3.1 示例代码
      • 3.2 页面效果
    • 4. 表格中的事件绑定
      • 4.1 示例代码
      • 4.2 页面效果
    • 5. 表单中的事件绑定
      • 5.1 示例代码
      • 5.2 页面效果
    • 6. 复选框功能实现
      • 6.1 示例代码
      • 6.2 页面效果
    • 7. 示例代码下载


JS(JavaScript)入门指南
JS(JavaScript)入门指南(DOM、事件处理、BOM、数据校验)
JS(JavaScript)学习专栏


JS(JavaScript)事件处理(事件绑定)趣味案例

通过创建一个页面来实现事件处理相关的操作,以下为实例演示部分,主要针对dom操作表格以及事件相关的操作。

1. 创建表格

创建一个表格,表格每行最后有一个按钮,按钮为删除当前行的事件
表格页脚有两个按钮:首行删除和末行删除

1.1 示例代码

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用dom操作表格-创建一个表格</title></head>
<body><!-- 将表格放到div块中,方便后续操作 --><div id="container"><!-- 表格 --><table id="tt"><!-- 表头 --><thead><tr><th>召唤师</th><th>英雄</th><th>定位</th><th>金币</th><th>技能</th></tr></thead><!-- 表格体 --><tbody id="tb"><tr><th>寒山</th><th>李白</th><th>刺客</th><th>38000</th><th><input type="button" value="惊鸿一剑" class="del"></th></tr><tr><th>李四</th><th>廉颇</th><th>坦克</th><th>11800</th><th><input type="button" value="地动山摇" class="del"></th></tr><tr><th>赵五</th><th>貂蝉</th><th>法师</th><th>38000</th><th><input type="button" value="随风起舞" class="del"></th></tr><tr><th>王二</th><th>后羿</th><th>射手</th><th>8800</th><th><input type="button" value="百步穿杨" class="del"></th></tr></tbody><!-- 表格页脚 --><tfoot><tr><td colspan="5"><input type="button" value="从首行删除" id="btnDelFirst"><input type="button" value="从末行删除" id="btnDelLast"></td></tr></tfoot></table></div>
</body>
</html>

1.2 页面效果

使用浏览器打开页面,效果如下,此时按钮并未生效,需要后续绑定事件
在这里插入图片描述

2. 创建表单

在前面表格的基础上,创建一个表单,表单中设置的是input输入,有文本、单选、按钮,用来对上面的表格进行数据的操作

2.1 示例代码

表单示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用dom操作表格-创建一个form表单</title></head>
<body><div id="container"><!-- 表格 --><table id="tt"><!-- 表头 --><thead><tr><th>召唤师</th><th>英雄</th><th>定位</th><th>金币</th><th>技能</th></tr></thead><!-- 表格体 --><tbody id="tb"><tr><th>寒山</th><th>李白</th><th>刺客</th><th>38000</th><th><input type="button" value="惊鸿一剑" class="del"></th></tr><tr><th>李四</th><th>廉颇</th><th>坦克</th><th>11800</th><th><input type="button" value="地动山摇" class="del"></th></tr><tr><th>赵五</th><th>貂蝉</th><th>法师</th><th>38000</th><th><input type="button" value="随风起舞" class="del"></th></tr><tr><th>王二</th><th>后羿</th><th>射手</th><th>8800</th><th><input type="button" value="百步穿杨" class="del"></th></tr></tbody><!-- 表格页脚 --><tfoot><tr><td colspan="5"><input type="button" value="从首行删除" id="btnDelFirst"><input type="button" value="从末行删除" id="btnDelLast"></td></tr></tfoot></table><hr><!-- form表单创建 --><form action="" id="formId">召唤师:<input type="text" id="name"><br>英雄:<input type="text" id="heroName"><br>定位:<input type="radio" name="actor" value="tank" id="tank" checked> 坦克 <input type="radio" name="actor" value="warrior" id="warrior"> 战士 <input type="radio" name="actor" value="assassin" id="assassin"> 刺客<input type="radio" name="actor" value="master" id="master"> 法师<input type="radio" name="actor" value="shooter" id="shooter"> 射手<input type="radio" name="actor" value="addjunct" id="addjunct"> 辅助<br> 价格:<input type="text" id="price"><br>技能:<input type="text" id="func"><br><input type="button" value="添  加" id="btnAdd"><input type="button" value="重  置"></form></div></body>
</html>

2.2 页面效果

使用浏览器打开页面,如下,表单中的事件也并未绑定,暂时无效
在这里插入图片描述

3. 添加样式

为表格和表单添加样式,优化以下视觉效果

3.1 示例代码

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用dom操作表格-为表格和表单添加样式</title><style>/* 设置整个div块在页面中的位置 */#container{/* 居中 */text-align: center;}/* 设置table表格的样式 */#tt{/* 宽度 */width: 500px;/* 居中 */text-align: center;/* 边界设置 实线 灰色 */border: 1px solid #ccc;/* 边框设置 上下设为0 左右设为自动 */margin: 0 auto;}/* table下的td和th样式设置 */#tt td, #tt th{/* 边界设置 实线 灰色 */border: 1px solid #ccc;}/* table下的页脚的td样式设置 */#tt tfoot td{/* 靠右 */text-align: right;}/* 表单的样式设置 */#formId{/* 每行的间隔设置 */line-height: 30px;}</style></head>
<body><div id="container"><!-- 表格 --><table id="tt"><!-- 表头 --><thead><tr><th>召唤师</th><th>英雄</th><th>定位</th><th>金币</th><th>技能</th></tr></thead><!-- 表格体 --><tbody id="tb"><tr><th>寒山</th><th>李白</th><th>刺客</th><th>38000</th><th><input type="button" value="惊鸿一剑" class="del"></th></tr><tr><th>李四</th><th>廉颇</th><th>坦克</th><th>11800</th><th><input type="button" value="地动山摇" class="del"></th></tr><tr><th>赵五</th><th>貂蝉</th><th>法师</th><th>38000</th><th><input type="button" value="随风起舞" class="del"></th></tr><tr><th>王二</th><th>后羿</th><th>射手</th><th>8800</th><th><input type="button" value="百步穿杨" class="del"></th></tr></tbody><!-- 表格页脚 --><tfoot><tr><td colspan="5"><input type="button" value="从首行删除" id="btnDelFirst"><input type="button" value="从末行删除" id="btnDelLast"></td></tr></tfoot></table><hr><!-- form表单创建 --><form action="" id="formId">召唤师:<input type="text" id="name"><br>英雄:<input type="text" id="heroName"><br>定位:<input type="radio" name="actor" value="tank" id="tank" checked> 坦克 <input type="radio" name="actor" value="warrior" id="warrior"> 战士 <input type="radio" name="actor" value="assassin" id="assassin"> 刺客<input type="radio" name="actor" value="master" id="master"> 法师<input type="radio" name="actor" value="shooter" id="shooter"> 射手<input type="radio" name="actor" value="addjunct" id="addjunct"> 辅助<br> 价格:<input type="text" id="price"><br>技能:<input type="text" id="func"><br><input type="button" value="添  加" id="btnAdd"><input type="button" value="重  置"></form></div></body>
</html>

3.2 页面效果

使用浏览器打开页面,如下,看起来好一点点
在这里插入图片描述

4. 表格中的事件绑定

先为表格中的按钮绑定事件,编写js代码

4.1 示例代码

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用dom操作表格-为表格中的按钮绑定事件</title><style>/* 设置整个div块在页面中的位置 */#container{/* 居中 */text-align: center;}/* 设置table表格的样式 */#tt{/* 宽度 */width: 500px;/* 居中 */text-align: center;/* 边界设置 实线 灰色 */border: 1px solid #ccc;/* 边框设置 上下设为0 左右设为自动 */margin: 0 auto;}/* table下的td和th样式设置 */#tt td, #tt th{/* 边界设置 实线 灰色 */border: 1px solid #ccc;}/* table下的页脚的td样式设置 */#tt tfoot td{/* 靠右 */text-align: right;}/* 表单的样式设置 */#formId{/* 每行的间隔设置 */line-height: 30px;}</style><script>//页面加载完之后触发事件window.onload=function(){//为技能按钮绑定事件(删除,点击技能释放大招,删除当前行)var btFuns = document.querySelectorAll(".del");//遍历所有按钮,移出当前行,即trfor(var i=0;i<btFuns.length;i++){btFuns[i].onclick=function(){//当前获取的位置是input标签,其父标签的父标签为tr标签this.parentNode.parentNode.remove();}}//为首行删除按钮绑定事件$("btnDelFirst").onclick=function(){//通过获取tb的document对象,然后通过标签tr获取集合,删除第一个tr$("tb").getElementsByTagName("tr")[0].remove();}//为末行删除按钮绑定事件$("btnDelLast").onclick=function(){//获取tb下的tr集合var trs = $("tb").getElementsByTagName("tr");//移出最后一个trtrs[trs.length-1].remove();;}}//获取元素的函数function $(id){return document.getElementById(id);}</script></head>
<body><div id="container"><!-- 表格 --><table id="tt"><!-- 表头 --><thead><tr><th>召唤师</th><th>英雄</th><th>定位</th><th>金币</th><th>技能</th></tr></thead><!-- 表格体 --><tbody id="tb"><tr><th>寒山</th><th>李白</th><th>刺客</th><th>38000</th><th><input type="button" value="惊鸿一剑" class="del"></th></tr><tr><th>李四</th><th>廉颇</th><th>坦克</th><th>11800</th><th><input type="button" value="地动山摇" class="del"></th></tr><tr><th>赵五</th><th>貂蝉</th><th>法师</th><th>38000</th><th><input type="button" value="随风起舞" class="del"></th></tr><tr><th>王二</th><th>后羿</th><th>射手</th><th>8800</th><th><input type="button" value="百步穿杨" class="del"></th></tr></tbody><!-- 表格页脚 --><tfoot><tr><td colspan="5"><input type="button" value="从首行删除" id="btnDelFirst"><input type="button" value="从末行删除" id="btnDelLast"></td></tr></tfoot></table><hr><!-- form表单创建 --><form action="" id="formId">召唤师:<input type="text" id="name"><br>英雄:<input type="text" id="heroName"><br>定位:<input type="radio" name="actor" value="tank" id="tank" checked> 坦克 <input type="radio" name="actor" value="warrior" id="warrior"> 战士 <input type="radio" name="actor" value="assassin" id="assassin"> 刺客<input type="radio" name="actor" value="master" id="master"> 法师<input type="radio" name="actor" value="shooter" id="shooter"> 射手<input type="radio" name="actor" value="addjunct" id="addjunct"> 辅助<br> 价格:<input type="text" id="price"><br>技能:<input type="text" id="func"><br><input type="button" value="添  加" id="btnAdd"><input type="button" value="重  置"></form></div></body>
</html>

4.2 页面效果

使用浏览器打开页面,如下,此时可以点击技能框里的技能进行删除当前行,也可以点击右下角的首行删除和末行删除进行首行和末行的删除
在这里插入图片描述
在这里插入图片描述

5. 表单中的事件绑定

5.1 示例代码

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用dom操作表格-为表单中的按钮绑定事件</title><style>/* 设置整个div块在页面中的位置 */#container{/* 居中 */text-align: center;/* background-color: lightblue; */}/* 设置table表格的样式 */#tt{/* 宽度 */width: 500px;/* 居中 */text-align: center;/* 边界设置 实线 灰色 */border: 1px solid #ccc;/* 边框设置 上下设为0 左右设为自动 */margin: 0 auto;/* 表格背景色 *//* background-color: lightblue; */}/* table下的td和th样式设置 */#tt td, #tt th{/* 边界设置 实线 灰色 */border: 1px solid #ccc;}/* table下的页脚的td样式设置 */#tt tfoot td{/* 靠右 */text-align: right;}/* 表单的样式设置 */#formId{/* 每行的间隔设置 */line-height: 30px;}</style><script>//页面加载完之后触发事件window.onload=function(){//为添加按钮绑定事件// document.getElementById("btnAdd")$("btnAdd").onclick=function(){//创建trvar tr = document.createElement("tr");//创建tdvar tdName = document.createElement("td");var tdHeroName = document.createElement("td");var tdActor = document.createElement("td");var tdPrice = document.createElement("td");var tdFun = document.createElement("td");//将数据添加到td中tdName.innerHTML=$("name").value;tdHeroName.innerHTML=$("heroName").value;// tdActor.innerHTML=$("actor").value;//根据勾选的位置将对应的值填入定位一栏if($("tank").checked){tdActor.innerHTML=$("tank").value;}if($("warrior").checked){tdActor.innerHTML=$("warrior").value;}if($("assassin").checked){tdActor.innerHTML=$("assassin").value;}if($("master").checked){tdActor.innerHTML=$("master").value;}if($("shooter").checked){tdActor.innerHTML=$("shooter").value;}if($("addjunct").checked){tdActor.innerHTML=$("addjunct").value;}tdPrice.innerHTML=$("price").value;// tdFun.innerHTML=$("func").value;//创建按钮var btnFun = document.createElement("input");btnFun.type = "button";btnFun.value = $("func").value;//为按钮绑定事件用于删除btnFun.onclick = function(){this.parentNode.parentNode.remove();}tdFun.appendChild(btnFun);//将td添加到tr中tr.appendChild(tdName);tr.appendChild(tdHeroName);tr.appendChild(tdActor);tr.appendChild(tdPrice);tr.appendChild(tdFun);//将tr添加到tbody中$("tb").appendChild(tr);}//为技能按钮绑定事件(删除,点击技能释放大招,删除当前行)var btFuns = document.querySelectorAll(".del");//遍历所有按钮,移出当前行,即trfor(var i=0;i<btFuns.length;i++){btFuns[i].onclick=function(){//当前获取的位置是input标签,其父标签的父标签为tr标签this.parentNode.parentNode.remove();}}//为首行删除按钮绑定事件$("btnDelFirst").onclick=function(){//通过获取tb的document对象,然后通过标签tr获取集合,删除第一个tr$("tb").getElementsByTagName("tr")[0].remove();}//为末行删除按钮绑定事件$("btnDelLast").onclick=function(){//获取tb下的tr集合var trs = $("tb").getElementsByTagName("tr");//移出最后一个trtrs[trs.length-1].remove();;}}//获取元素的函数function $(id){return document.getElementById(id);}</script></head>
<body><div id="container"><!-- 表格 --><table id="tt"><!-- 表头 --><thead><tr><th>召唤师</th><th>英雄</th><th>定位</th><th>金币</th><th>技能</th></tr></thead><!-- 表格体 --><tbody id="tb"><tr><th>寒山</th><th>李白</th><th>刺客</th><th>38000</th><th><input type="button" value="惊鸿一剑" class="del"></th></tr><tr><th>李四</th><th>廉颇</th><th>坦克</th><th>11800</th><th><input type="button" value="地动山摇" class="del"></th></tr><tr><th>赵五</th><th>貂蝉</th><th>法师</th><th>38000</th><th><input type="button" value="随风起舞" class="del"></th></tr><tr><th>王二</th><th>后羿</th><th>射手</th><th>8800</th><th><input type="button" value="百步穿杨" class="del"></th></tr></tbody><!-- 表格页脚 --><tfoot><tr><td colspan="5"><input type="button" value="从首行删除" id="btnDelFirst"><input type="button" value="从末行删除" id="btnDelLast"></td></tr></tfoot></table><hr><!-- form表单创建 --><form action="" id="formId">召唤师:<input type="text" id="name"><br>英雄:<input type="text" id="heroName"><br>定位:<input type="radio" name="actor" value="tank" id="tank" checked> 坦克 <input type="radio" name="actor" value="warrior" id="warrior"> 战士 <input type="radio" name="actor" value="assassin" id="assassin"> 刺客<input type="radio" name="actor" value="master" id="master"> 法师<input type="radio" name="actor" value="shooter" id="shooter"> 射手<input type="radio" name="actor" value="addjunct" id="addjunct"> 辅助<br> 价格:<input type="text" id="price"><br>技能:<input type="text" id="func"><br><input type="button" value="添  加" id="btnAdd"><input type="button" value="重  置"></form></div></body>
</html>

5.2 页面效果

使用浏览器打开页面,如下,此时可以填写召唤师、英雄、价格、技能,然后勾选定位的位置,进行添加信息到表格中
在这里插入图片描述
在这里插入图片描述

6. 复选框功能实现

在每行最前面加上复选框按钮,最上面的按钮是全选按钮。
全选按钮选中后,下方所有复选框都自动勾选,反之亦然。
下方复选框全部勾选后,全选按钮的复选框自动勾选。
对新增的行也要满足。
在复选框那列最先放设置删除所勾选的内容按钮,可删除所有勾选的内容。

6.1 示例代码

示例代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>使用dom操作表格-添加复选框并绑定事件</title><style>/* 设置整个div块在页面中的位置 */#container{/* 居中 */text-align: center;/* background-color: lightblue; */}/* 设置table表格的样式 */#tt{/* 宽度 */width: 500px;/* 居中 */text-align: center;/* 边界设置 实线 灰色 */border: 1px solid #ccc;/* 边框设置 上下设为0 左右设为自动 */margin: 0 auto;/* 表格背景色 *//* background-color: lightblue; */}/* table下的td和th样式设置 */#tt td, #tt th{/* 边界设置 实线 灰色 */border: 1px solid #ccc;}/* table下的页脚的td样式设置 */#tt tfoot td{/* 靠右 */text-align: right;}/* 表单的样式设置 */#formId{/* 每行的间隔设置 */line-height: 30px;}/* 复选框删除按钮样式设置 */#tt tfoot tr td{text-align: center;}</style><script>//页面加载完之后触发事件window.onload=function(){//为添加按钮绑定事件// document.getElementById("btnAdd")$("btnAdd").onclick=function(){//创建trvar tr = document.createElement("tr");//创建tdvar tdName = document.createElement("td");var tdHeroName = document.createElement("td");var tdActor = document.createElement("td");var tdPrice = document.createElement("td");var tdFun = document.createElement("td");//添加复选框var tdCheckbox = document.createElement("td");//将数据添加到td中tdName.innerHTML=$("name").value;tdHeroName.innerHTML=$("heroName").value;// tdActor.innerHTML=$("actor").value;//根据勾选的位置将对应的值填入定位一栏if($("tank").checked){tdActor.innerHTML=$("tank").value;}if($("warrior").checked){tdActor.innerHTML=$("warrior").value;}if($("assassin").checked){tdActor.innerHTML=$("assassin").value;}if($("master").checked){tdActor.innerHTML=$("master").value;}if($("shooter").checked){tdActor.innerHTML=$("shooter").value;}if($("addjunct").checked){tdActor.innerHTML=$("addjunct").value;}tdPrice.innerHTML=$("price").value;// tdFun.innerHTML=$("func").value;//创建按钮var btnFun = document.createElement("input");btnFun.type = "button";btnFun.value = $("func").value;//为按钮绑定事件用于删除btnFun.onclick = function(){this.parentNode.parentNode.remove();}tdFun.appendChild(btnFun);//为复选框添加属性var checkboxInfo = document.createElement("input");checkboxInfo.type="checkbox";checkboxInfo.className="checkboxed";checkboxInfo.onclick=function(){var checks = document.querySelectorAll(".checkboxed");//统计已选中的数量var count = 0;for(var j=0; j<checks.length; j++){if(checks[j].checked){count++;}}//判断是否全部选中if(count==checks.length){$("all").checked=true;}else{$("all").checked=false;}};//将复选框的input标签添加到td中tdCheckbox.appendChild(checkboxInfo);//将td添加到tr中tr.appendChild(tdCheckbox);tr.appendChild(tdName);tr.appendChild(tdHeroName);tr.appendChild(tdActor);tr.appendChild(tdPrice);tr.appendChild(tdFun);//将tr添加到tbody中$("tb").appendChild(tr);};//为技能按钮绑定事件(删除,点击技能释放大招,删除当前行)var btFuns = document.querySelectorAll(".del");//遍历所有按钮,移出当前行,即trfor(var i=0;i<btFuns.length;i++){btFuns[i].onclick=function(){//当前获取的位置是input标签,其父标签的父标签为tr标签this.parentNode.parentNode.remove();}}//为首行删除按钮绑定事件$("btnDelFirst").onclick=function(){//通过获取tb的document对象,然后通过标签tr获取集合,删除第一个tr$("tb").getElementsByTagName("tr")[0].remove();};//为末行删除按钮绑定事件$("btnDelLast").onclick=function(){//获取tb下的tr集合var trs = $("tb").getElementsByTagName("tr");//移出最后一个trtrs[trs.length-1].remove();;};// 为全选绑定事件$("all").onclick=function(){//如果全选框勾上,触发事件所有复选框全部选中if($("all").checked){var checkeds = document.querySelectorAll(".checkboxed");for(var i=0; i<checkeds.length; i++){checkeds[i].checked=true;}}else{var checkeds = document.querySelectorAll(".checkboxed");for(var i=0; i<checkeds.length; i++){checkeds[i].checked=false;}}};//实现选中所有复选框时,全选自动勾选var checks = document.querySelectorAll(".checkboxed");for(var i=0; i<checks.length; i++){checks[i].onclick=function(){var checks = document.querySelectorAll(".checkboxed");//统计已选中的数量var count = 0;for(var j=0; j<checks.length; j++){if(checks[j].checked){count++;}}//判断是否全部选中if(count==checks.length){$("all").checked=true;}else{$("all").checked=false;}};}//为删除所勾选内容的按钮绑定事件$("delChecked").onclick=function(){var checks = document.querySelectorAll(".checkboxed");for(var i=0; i<checks.length; i++){if(checks[i].checked){checks[i].parentNode.parentNode.remove();}}}};//获取元素的函数function $(id){return document.getElementById(id);}</script></head>
<body><div id="container"><!-- 表格 --><table id="tt"><!-- 表头 --><thead><tr><th>全选 <input type="checkbox" id="all"></th><th>召唤师</th><th>英雄</th><th>定位</th><th>金币</th><th>技能</th></tr></thead><!-- 表格体 --><tbody id="tb"><tr><th><input type="checkbox" class="checkboxed"></th><th>寒山</th><th>李白</th><th>刺客</th><th>38000</th><th><input type="button" value="惊鸿一剑" class="del"></th></tr><tr><th><input type="checkbox" class="checkboxed"></th><th>李四</th><th>廉颇</th><th>坦克</th><th>11800</th><th><input type="button" value="地动山摇" class="del"></th></tr><tr><th><input type="checkbox" class="checkboxed"></th><th>赵五</th><th>貂蝉</th><th>法师</th><th>38000</th><th><input type="button" value="随风起舞" class="del"></th></tr><tr><th><input type="checkbox" class="checkboxed"></th><th>王二</th><th>后羿</th><th>射手</th><th>8800</th><th><input type="button" value="百步穿杨" class="del"></th></tr></tbody><!-- 表格页脚 --><tfoot><tr><td><input type="button" value="删除所勾选内容" id="delChecked"></td><td colspan="5"><input type="button" value="从首行删除" id="btnDelFirst"><input type="button" value="从末行删除" id="btnDelLast"></td></tr></tfoot></table><hr><!-- form表单创建 --><form action="" id="formId">召唤师:<input type="text" id="name"><br>英雄:<input type="text" id="heroName"><br>定位:<input type="radio" name="actor" value="tank" id="tank" checked> 坦克 <input type="radio" name="actor" value="warrior" id="warrior"> 战士 <input type="radio" name="actor" value="assassin" id="assassin"> 刺客<input type="radio" name="actor" value="master" id="master"> 法师<input type="radio" name="actor" value="shooter" id="shooter"> 射手<input type="radio" name="actor" value="addjunct" id="addjunct"> 辅助<br> 价格:<input type="text" id="price"><br>技能:<input type="text" id="func"><br><input type="button" value="添  加" id="btnAdd"><input type="button" value="重  置"></form></div></body>
</html>

6.2 页面效果

使用浏览器打开页面,如下
在这里插入图片描述

7. 示例代码下载

本文示例代码文件已上传至CSDN资源库
下载地址:JavaScript 趣味案例-事件处理-dom操作表格 示例代码


感谢阅读,祝君暴富!


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/363205.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

天翼云服务器80、443等特殊端口无法访问原因记录

之前阿里云、腾讯云的服务器上&#xff0c;想要用域名访问项目简单配置就好了&#xff0c;这次甲方直接买的翼云的服务器&#xff0c;配置了半天&#xff0c;防火墙端口80、443端口开放了&#xff0c;控制台安全组也添加了&#xff0c;就是不能用域名或IP直接访问&#xff0c;配…

软考《信息系统运行管理员》-1.4 常见的信息系统

1.4 常见的信息系统 常见的信息系统综述 财务系统 财务信息系统会计信息系统 办公自动化系统业务处理系统生产管理系统ERP系统客户关系管理系统人力资源系统 会计信息系统 主要任务是保证记账的正确性。 订单处理子系统库存子系统会计应收/应支系统总账子系统 财务信息系…

Swoole v6 能否让 PHP 再次伟大?

现状 传统的 PHP-FPM 也是多进程模型的的运行方式&#xff0c;但每个进程只能处理完当前请求&#xff0c;才能接收下一个请求。而且对于 PHP 脚本来说&#xff0c;只是接收请求和响应请求&#xff0c;并不参与网络通信。对数据库资源的操作&#xff0c;也是一次请求一次有效&am…

机器人控制系列教程之URDF文件语法介绍

前两期推文&#xff1a;机器人控制系列教程之动力学建模(1)、机器人控制系列教程之动力学建模(2)&#xff0c;我们主要从数学的角度介绍了机器人的动力学建模的方式&#xff0c;随着机器人技术的不断发展&#xff0c;机器人建模成为了机器人系统设计中的一项关键任务。URDF&…

如何使用飞书快捷指令无感记账,ios版

总结 很多人无法长期坚持记账&#xff0c;主要是每次消费需要打开手机软件&#xff0c;一系列繁琐的操作&#xff0c;导致过程中可能就忘了。 今天给大家带来飞书自动记账。 演示视频 点击查看&#xff1a;https://www.douyin.com/video/7312857946382241063 安装 下载快捷…

C++编译时引入json/nlohmann文件报错

报错信息: In file included from /home/chenlang/catkin_ws/src/leanrning_communication/src/mysql/../utils/data.h:14:0,from /home/chenlang/catkin_ws/src/leanrning_communication/src/mysql/MyRobotDb.h:32,from /home/chenlang/catkin_ws/src/leanrning_communicatio…

从一到无穷大 #29 ByteGraph的计算,内存,存储三级分离方案是否可以通用化为多模数据库

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。 本作品 (李兆龙 博文, 由 李兆龙 创作)&#xff0c;由 李兆龙 确认&#xff0c;转载请注明版权。 文章目录 引言ByteGraph现有架构阿里云Lindorm腾讯YottaDB多模型化修改点ByteGraph论文中的优化…

项目实训-vue(十一)

项目实训-vue&#xff08;十一&#xff09; 文章目录 项目实训-vue&#xff08;十一&#xff09;1.概述2.页顶导航栏3.导航信息4.总结 1.概述 本篇博客将记录我在图片上传页面中的工作。 2.页顶导航栏 <divstyle"display: flex;justify-content: space-between;alig…

真正的IDEA在线版有多好用

前言 在上一篇文章使用过TitanIDE的VS Code在线版以后&#xff0c;尝到了不少甜头&#xff0c;紧接着又去使用了他的在线版IntelliJ IDEA&#xff0c;同样非常惊艳&#xff0c;不需要任何时间去适应这款云原生开发工具,事不宜迟&#xff0c;马上开整 这才是真正的VS Code在线版…

自制全网最便宜的雷达感应灯光画,成本只需5元

自制全网最便宜的雷达感应灯光画&#xff0c;成本5元 ​ 成本组成&#xff1a;带热释电的人体感应灯&#xff08;0.5元&#xff09;雷达感应模块&#xff08;3.5元&#xff09;首饰盒&#xff08;0.45元&#xff09;微喷油画布&#xff08;1元&#xff09;5.45元 ​ 说一下做灯…

未来科技中的RTK接收机应用探索

RTK实时差分定位技术&#xff08;RTK&#xff0c;Real-Time Kinematic&#xff09;&#xff0c;作为高精度定位技术的一种重要手段&#xff0c;已经在地理测绘、测量工程、航空航天等领域取得了广泛应用。随着科技的不断发展&#xff0c;RTK导航接收机的应用领域也日益拓宽。首…

Java鲜花下单预约系统源码小程序源码

让美好触手可及 &#x1f338;一、开启鲜花新篇章 在繁忙的都市生活中&#xff0c;我们总是渴望那一抹清新与美好。鲜花&#xff0c;作为大自然的馈赠&#xff0c;总能给我们带来无尽的惊喜与愉悦。但你是否曾因为工作繁忙、时间紧张而错过了亲自挑选鲜花的机会&#xff1f;今…

G882磁力仪拖鱼位置是如何计算的?

根据参考文献&#xff0c;磁力仪拖鱼位置计算有两种方法&#xff1a; 1、直线法 直线计算法是假设不考虑海流、船摆等动态因素的影响&#xff0c;拖鱼与拖点始终和航向相同&#xff0c;即整个拖拽系统与船舶是刚性连接。 2、曲线法 实际海洋磁力测量中&#xff0c;在海风、海…

从单一到多元:EasyCVR流媒体视频汇聚技术推动安防监控智能升级

随着科技的飞速发展&#xff0c;视频已成为我们日常生活和工作中的重要组成部分。尤其在远程办公、在线教育、虚拟会议等领域&#xff0c;视频的应用愈发广泛。为了满足日益增长的视频需求&#xff0c;流媒体视频汇聚融合技术应运而生&#xff0c;它不仅改变了传统视频的观看和…

计算机网络——数据链路层(数据链路层概述及基本问题)

链路、数据链路和帧的概念 数据链路层在物理层提供服务的基础上向网络层提供服务&#xff0c;其主要作用是加强物理层传输原始比特流的功能&#xff0c;将物理层提供的可能出错的物理连接改造为逻辑上无差错的数据链路&#xff0c;使之对网络层表现为一条无差错的链路。 链路(…

Windows部署MinIO,搭建本地对象存储服务

一、前言 二、MinIO介绍 三、Windows部署MinIO服务 1、准备工作 2、下载MinIO服务 3、启动MinIO服务 4、设置用户名密码 5、创建.bat文件启动服务 四、MinIO基本操作 1、存储桶管理 2、对象管理 3、数据查看 一、前言 基于外网的项目&#xff0c;可以使用阿里云等…

【MySQL】InnoDB的存储结构

InnoDB的存储结构&#xff1a;每个表都会生成一个表空间文件&#xff0c;这个文件里面最小结构就是行&#xff0c;存储的真正的数据&#xff0c;一个页来管理若干行&#xff0c;一个区来管理若干页&#xff0c;一个区组来管理若干区。段并不是真正的物理存储结构&#xff0c;它…

Kotlin设计模式:代理模式详解

Kotlin设计模式&#xff1a;代理模式详解 在软件开发中&#xff0c;设计模式是解决常见问题的一种优雅方法。本文将介绍Kotlin中的代理模式&#xff08;Proxy Pattern&#xff09;&#xff0c;其应用场景&#xff0c;以及如何通过实例代码实现这一模式。 代理模式的目的 代理…

YOLOV8图像分割预测后输出mask图

训练一个yolov8模型后&#xff0c;用官方的预测脚本一般是&#xff1a; results model.predict(img_path, saveTrue, save_diroutput_folder) 运行此代码会直接在run里面生成一个文件夹&#xff0c;保存预测图像。如果要获取分割后的mask点&#xff0c;或mask的轮廓点&#…

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 螺旋矩阵填数(100分) - 三语言AC题解(Python/Java/Cpp)

&#x1f36d; 大家好这里是清隆学长 &#xff0c;一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f497; &#x1f…