JS-项目实战-新增水果库存功能实现

1、fruit.js

function $(name) {if (name) {//假设name是  #fruit_tblif (name.startsWith("#")) {name = name.substring(1);   //fruit_tblreturn document.getElementById(name);} else {return document.getElementsByName(name);  //返回的是NodeList类型}}
}//当页面加载完成后执行后面的匿名函数
window.onload = function () {//get:获取     Element:元素    By:通过...方式//getElementById()根据id值获let fruitTbl = $("#fruit_tbl");//table.rows:获取这个表格的所有的行，返回数组let rows = fruitTbl.rows;//从 1 开始，因为 第 0 行是表头，不需要绑定事件for (let i = 1; i < rows.length - 1; i++) {let tr = rows[i];//事件动态绑定tr.onmouseover = showBGColor;tr.onmouseout = clearBGColor;//cell:单元格、细胞//获取这一行的所有的单元格let tds = tr.cells;let priceTD = tds[2];//绑定鼠标悬浮事件priceTD.onmouseover = showHand;//绑定点击事件priceTD.onclick = editPrice//给删除小图标绑定鼠标悬浮和点击事件let delImgTd = tds[5];let delImg = delImgTd.firstChild;delImg.onmouseover = showHand;delImg.onclick = delFruit;}zj();//获取全选这个复选框let ckAll = $("#ckAll");ckAll.onchange = myCkAll;//获取所有的普通复选框let ckArr = $("ck");ckArr.forEach((item, index) => {item.onchange = myCk;});//给批量删除按钮绑定点击事件const delsBtn = $("#delsBtn");delsBtn.onclick = delFruits;//绑定添加按钮的点击事件//添加按钮有两个功能:1、新增   2、修改$("#addFruit").onclick = addOrUpdateFruit;
};
addOrUpdateFruit = function () {let fname = $("#fname").value;let price = parseInt($("#price").value);let fcount = parseInt($("#fcount").value);let xj = price * fcount;let fruitTbl = $("#fruit_tbl");//第 1 步:新增一行//insertRow()会在表格中插入一行，不带参数时在末尾插入//insertRow(1)会在索引为1的位置插入一个新行let tr = fruitTbl.insertRow(fruitTbl.rows.length - 1);//insertCell()插入单元格let ckTD = tr.insertCell();let fnameTD = tr.insertCell();let priceTD = tr.insertCell();let fcountTD = tr.insertCell();let xjTD = tr.insertCell();let delImgTD = tr.insertCell();//第 2 步:向每一个单元格填充内容ckTD.innerHTML = "<input type='checkbox' name='ck'/>";fnameTD.innerText = fname;priceTD.innerText = price;fcountTD.innerText = fcount;xjTD.innerText = xj;delImgTD.innerHTML = "<img src='imgs/del.png' class='delBtn'/>";//第 3 步:绑定相关事件//给新的这一行绑定鼠标悬浮和离开事件tr.onmouseover = showBGColor;tr.onmouseout = clearBGColor;//给复选框绑定状态改变事件ckTD.firstChild.onchange = myCk;//给单价单元格绑定鼠标悬浮以及点击事件priceTD.onmouseover = showHand;priceTD.onclick = editPrice;//给删除小图标绑定鼠标悬浮以及点击事件let imgBtn = delImgTD.firstChild;imgBtn.onmouseover = showHand;imgBtn.onclick = delFruit;zj();
};
delFruits = function () {if (confirm("是否确认批量删除？")) {let fruitTbl = $("#fruit_tbl");let rows = fruitTbl.rows;let ckArr = $("ck");// for (let i = rows.length - 3; i >= 0; i--) {//     if (ckArr[i].checked) {//        fruitTbl.deleteRow(i + 1);//     }// }for (let i = rows.length - 3; i >= 0; i--) {if (ckArr[i].checked) {let rowIndex = ckArr[i].parentElement.parentElement.rowIndex;fruitTbl.deleteRow(rowIndex);}}zj();}
};
myCk = function () {let ck = event.srcElement;if (!ck.checked) { //说明是取消选中，则全选这个复选框一定是不选中的$("#ckAll").checked = false;} else {let ckArr = $("ck");//NodeList 转化成 Array 的三种解决方法:// 1、//let ckArr2 = Array.prototype.slice.call(ckArr);//$("#ckAll").checked = ckArr2.every(item => item.checked);//2、//$("#ckAll").checked = [...ckArr].every(item => item.checked);//3、let ckArr2 = Array.from(ckArr);$("#ckAll").checked = ckArr2.every(item => item.checked);//4、直接使用for循环，遍历NodeList// let flag = true;// for (let i = 0; i < ckArr.length; i++) {//     if (!ckArr[i].checked) {//         flag = false;//         break;//     }// }// $("#ckAll").checked = flag;}
};
myCkAll = function () {let ckAll = $("#ckAll");let flag = ckAll.checked;//debuggerlet ckArr = $("ck");for (let i = 0; i < ckArr.length; i++) {ckArr[i].checked = flag;}
};
delFruit = function () {if (window.confirm("是否删除？")) {let fruitTbl = $("#fruit_tbl");let delImg = event.srcElement;if (delImg && delImg.tagName == "IMG") {let tr = delImg.parentElement.parentElement;//tr.rowIndex获取当前tr这一行的行索引let rowIndex = tr.rowIndex;//table对象有一个方法:deleteRow,能够删除指定索引位置的行fruitTbl.deleteRow(rowIndex);//重新计算总计zj();}}
};
editPrice = function () {let priceTD = event.srcElement;//inner:在...内部let oldPrice = priceTD.innerText;//innerHTML:在节点内部填充一段HTML代码//priceTD.innerHTML = "<input type='text' size='2' value='"+oldPrice+"'/>";priceTD.innerHTML = "<input type='text' size='2'/>";/*** <td><input type="text" size="2"/></td>* first:第一个 child:孩子* firstChild:第一个子节点* @type {ActiveX.IXMLDOMNode | ChildNode | (() => (Node | null))}*/let priceInput = priceTD.firstChild;priceInput.value = oldPrice;priceInput.select();//绑定失去焦点事件priceInput.onblur = updatePrice;//输入框绑定键盘摁下事件，用于判断摁下的值是否合法priceInput.onkeydown = ckInput;
};
ckInput = function () {// 0-9:48-57    backspace:8    enter:13let kc = event.keyCode;if (!((kc >= 48 && kc <= 57) || kc == 8 || kc == 13)) {//取消事件event.returnValue = false;}if (kc == 13) {event.srcElement.blur();}
};
updatePrice = function () {let priceInput = event.srcElement;let newPrice = priceInput.value;let priceTD = priceInput.parentElement;priceTD.innerText = newPrice;xj(priceTD.parentElement)
};
xj = function (tr) {if (tr && tr.tagName == "TR") {let tds = tr.cells;let priceTD = tds[2];let fcountTD = tds[3];let xjTD = tds[4];let price = parseInt(priceTD.innerText);let fcount = parseInt(fcountTD.innerText);let xj = price * fcount;xjTD.innerText = xj;//同时更新总计zj();}
};
zj = function () {let fruitTbl = $("#fruit_tbl");let rows = fruitTbl.rows;let total = 0;for (let i = 1; i < rows.length - 1; i++) {let tr = rows[i];let xj = parseInt(tr.cells[4].innerText);total += xj;}rows[rows.length - 1].cells[1].innerText = total;
};
function showHand() {let priceTD = event.srcElement;//cursor光标priceTD.style.cursor = "pointer";
}
function showBGColor() {//window.event表示当前发生的事件 ”window.“可以省略// console.log(window.event);// alert(window.event);let obj = window.event.srcElement;//alert(obj);//console.log(obj);   //发现obj是td，而不是tr。事件传递现象if (obj.tagName == "TD") {let td = obj;//parentElement:父元素   td的父元素是tr。tr有很多td子元素let tr = td.parentElement;tr.style.backgroundColor = "purple";//获取当前所有单元格，然后设置单元格中字体的颜色let tds = tr.cells;for (let i = 0; i < tds.length; i++) {tds[i].style.color = "white";}}}
function clearBGColor() {let td = window.event.srcElement;if (td.tagName == "TD") {let tr = td.parentElement;tr.style.backgroundColor = "transparent";//获取当前行所有单元格，然后设置单元格中字体的颜色let tds = tr.cells;for (let i = 0; i < tds.length; i++) {tds[i].style.color = "#031f02";}}
}

2、fruit.html

<!DOCTYPE html>
<html lang="zh_CN">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>js-DOM/BOM实战</title><link href="style/fruit.css" rel="stylesheet"></link><script src="js/鼠标悬浮和离开事件.js"></script>
</head>
<body>
<div id="div0"><div id="div_title">欢迎使用水果库存系统</div><div id="div2"><table id="fruit_tbl"><tr><th class="w10"><input type="checkbox" id="ckAll"/></th><th class="w20">名称</th><th class="w20">单价</th><th class="w20">数量</th><th class="w20">小计</th><th class="w10"><input type="button" value="批量删除" id="delsBtn"/></th></tr><!-- on:当...时候  mouse:鼠标  over:在...上--><!--当鼠标悬浮在这个tr上时,调用showBGColor()这个方法--><tr><td><input type="checkbox" name="ck"/></td><td>苹果</td><td>5</td><td>2</td><td>10</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" name="ck"/></td><td>菠萝</td><td>3</td><td>5</td><td>15</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" name="ck"/></td><td>哈密瓜</td><td>4</td><td>5</td><td>20</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" name="ck"/></td><td>葡萄</td><td>10</td><td>5</td><td>50</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" name="ck"/></td><td>青梅</td><td>10</td><td>5</td><td>50</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" name="ck"/></td><td>人参果</td><td>10</td><td>5</td><td>50</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" name="ck"/></td><td>菠萝蜜</td></td><td>10</td><td>5</td><td>50</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td><input type="checkbox" name="ck"/></td><td>西红柿</td><td>10</td><td>5</td><td>50</td><td><img src='imgs/del.png' class="delBtn"/></td></tr><tr><td colspan="2">总结:</td><td colspan="4">0</td></tr></table></div><div id="div3"><p>编辑库存记录</p><table id="fruit_add_tbl"><tr><th class="w30">名称:</th><td><input type="text" id="fname"/></td></tr><tr><th>单价:</th><td><input type="text" id="price"/></td></tr><tr><th>数量:</th><td><input type="text" id="fcount"/></td></tr><tr><th colspan="2"><input type="button" value="确定" id="addFruit"/><input type="reset" value="重填"/></th></tr></table></div>
</div>
</body>
</html>

3、fruit.css

*{color:rgb(3, 31, 2);font-weight: lighter;
}
body{padding:0;margin:0;background-color: rgb(3, 31, 2);
}
#div0{width:80%;border:0px solid red;background-color: rgb(209, 230, 235);margin-left:10%;padding-top:48px;padding-bottom:48px;margin-top:8px;
}
#div_title{width:80%;margin-left:10%;text-align: center;font-size:24px;letter-spacing: 4px;margin-bottom:16px;
}
#div2{margin-left:10%;border:0px solid red;width:80%;
}
.delBtn{width:16px;height:16px;
}
#fruit_tbl , #fruit_tbl td, #fruit_tbl th {border:1px solid lightgray;text-align: center;
}
#fruit_tbl{width:100%;line-height: 32px;border-collapse: collapse;
}
.w10{width:10%;
}
.w15{width:15%;
}
.w20{width:20%;
}
.w30 {width: 30%;
}
#div3{margin-left:20%;border:1px solid lightgray;width:60%;margin-top: 16px;padding-bottom: 16px;
}
#fruit_add_tbl {width: 40%;margin-left: 30%;border: 1px solid lightgray;border-collapse: collapse;
}
#fruit_add_tbl th,#fruit_add_tbl td {border: 1px solid lightgrey;padding: 4px;
}
#div3 p {text-align: center;letter-spacing: 4px;
}
#fruit_add_tbl input[type="button"],#fruit_add_tbl input[type="reset"] {width: 100px;height: 28px;border: 1px solid lightgray;
}
#fruit_add_tbl input[type="text"] {border: 1px solid lightgray;height: 22px;
}

在JS中往表格里插入数据，可以通过以下步骤实现：

  1. 获取对应的表格元素，可以使用document.getElementById、document.querySelector等方法获取。

  2. 创建需要插入的数据，可以使用数组、JSON对象等形式。

  3. 循环遍历数据，使用insertRow和insertCell等方法动态创建表格行和单元格。

  4. 在单元格中填充数据，可以使用innerHTML属性或者textContent属性。

以下是代码示例：

<!-- HTML代码 -->
<table id="myTable"><thead><tr><th>Name</th><th>Age</th><th>Gender</th></tr></thead><tbody></tbody>
</table>


// JavaScript代码
var data = [{ name: 'Tom', age: 20, gender: 'Male' },{ name: 'Mary', age: 25, gender: 'Female' },{ name: 'John', age: 30, gender: 'Male' }
];var table = document.getElementById('myTable');for (var i = 0; i < data.length; i++) {var row = table.insertRow(i + 1);var cell1 = row.insertCell(0);cell1.innerHTML = data[i].name;var cell2 = row.insertCell(1);cell2.innerHTML = data[i].age;var cell3 = row.insertCell(2);cell3.innerHTML = data[i].gender;
}

该代码可以往表格中添加data数组中的数据。insertRow方法用于动态创建表格行，insertCell方法用于动态创建单元格。innerHTML属性被用来设置单元格内的文本内容。注意循环插入时需要使用i+1作为insertRow和insertCell的参数，因为第一行已经被表头占用。

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

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

相关文章

浅谈电动汽车充电桩设计与应用研究

浅谈电动汽车充电桩设计与应用研究

安科瑞 华楠 摘要&#xff1a;目前&#xff0c;随着我国社会经济的快速发展&#xff0c;我国的各个领域都取得了突破性的发展&#xff0c;尤其是在电动汽车充电桩的设计方法&#xff0c;新型的电动汽车充电桩设计已经广泛的受到了人民群众的青睐与认可&#xff0c;而这种发展前…
阅读更多...
SQL sever2008数据库备份、还原以及库检查

SQL sever2008数据库备份、还原以及库检查

目录 一、数据库备份 法一：SSMS工具 法二： Transact-SQL (T-SQL) 命令 二、数据库还原 法一：SSMS工具 法二： Transact-SQL (T-SQL) 命令 三、数据库检查 1. 确认数据库状态： 2. 验证还原完成的数据： 3. 检查日志和错误信息： 方法 1：使用 SQL Server Managem…
阅读更多...
【网络编程】简述TCP通信程序，三次握手，四次挥手

【网络编程】简述TCP通信程序，三次握手，四次挥手

文章目录 &#x1f384;TCP通信程序⭐打印字符串✨中文乱码问题&#x1f388;解决方法 &#x1f33a;TCP三次握手&#x1f33a;TCP四次挥手&#x1f6f8;其他 &#x1f38a;专栏【网络编程】 &#x1f354;喜欢的诗句&#xff1a;更喜岷山千里雪 三军过后尽开颜。 &#x1f386…
阅读更多...
快速解密PPT幻灯片密码，让PPT重见天日

快速解密PPT幻灯片密码，让PPT重见天日

最简单的办法解密、找回和去除PPT幻灯片密码&#xff0c;具体步骤如下&#xff1a;1.百度搜索【密码帝官网】&#xff0c;2.点击“立即开始”在用户中心上传要解密的文件稍等片刻&#xff0c;就能找回密码。不用下载软件&#xff0c;手机电脑都可用。而且还支持Word、Excel、PD…
阅读更多...
VC++添加包含目录

VC++添加包含目录

安装了QT；它带有很多例子； 新建一个工程，添加一个C++源文件，随便拷个例子的源码过来； 然后VS会提示头2个include语句出错； 因为找不到这两个头文件；这需要添加包含目录； 进入项目属性页；VC++目录 - 包含目录，它之前有2个系统的值；点击右侧的下拉箭头按钮，点…
阅读更多...
C# 依赖注入如何实现

C# 依赖注入如何实现

在 C# 中&#xff0c;依赖注入&#xff08;Dependency Injection&#xff0c;简称 DI&#xff09;是一种编程技术&#xff0c;用于减少代码之间的耦合。依赖注入可以通过构造函数注入、属性注入或方法注入实现。在 .NET Core 和 .NET 5 中&#xff0c;还提供了一个内置的依赖注…
阅读更多...
基于Java GUI模拟银行自动取款机

基于Java GUI模拟银行自动取款机

一、课题描述 编写一个程序&#xff0c;模拟银行自动取款机的工作流程。主要功能如下所述: 当输入给定的卡号和密码&#xff08;初始卡号为888888和密码为123456)时&#xff0c;系统能登录ATM柜员机系统,用户可以按照以下规则进行: 查询余额:初始余额为50000元 ATM取款:每次…
阅读更多...
数据结构 栈与队列详解！！

数据结构 栈与队列详解！！

一.栈 关于内存中的栈和数据结构中的栈是不同的&#xff0c;本章着重讲的是数据结构的栈。 这是一张关于栈的表达图。从图中可以看出栈很像是一副卡牌&#xff0c;发牌时只能从上取出&#xff0c;即出栈。 而入栈则是像你出牌后&#xff0c;要把你出的牌压在上一张出的牌上面。…
阅读更多...
django理解03 数据库引入

django理解03 数据库引入

配置 settings.py DATABASES {"default": {"ENGINE": "django.db.backends.mysql",NAME:307_django_db,USER: root,PASSWORD: 123456,HOST: 127.0.0.1,PORT: 3306,} }先创建指定名称的数据库databases create database self_django_db DEFAUL…
阅读更多...
为什么mapper层不使用@Mapper注解，依然可以注入？

为什么mapper层不使用@Mapper注解，依然可以注入？

在MyBatis中&#xff0c;我们通常使用Mapper接口来操作数据库。在Spring Boot中&#xff0c;我们可以使用MapperScan注解来扫描Mapper接口所在的包&#xff0c;并将其注册到Spring容器中。但是&#xff0c;即使我们没有在Mapper接口上使用Mapper注解&#xff0c;Spring Boot也可…
阅读更多...
小程序图片保存不上黑屏

小程序图片保存不上黑屏

小程序图片保存不上黑屏 微信小程序保存图片相关内容 以及保存图片到手机 保存的图片是黑屏的原因是由于使用了https的图片引用 需要配置download合法域名
阅读更多...
【算法基础】筛质数

【算法基础】筛质数

文章目录 问题描述解决方法朴素筛法线性筛法 问题描述 给定一个正整数 n n n&#xff0c;请你求出 1 ∼ n 1∼n 1∼n 中质数的个数。 输入格式 共一行&#xff0c;包含整数 n。 输出格式 共一行&#xff0c;包含一个整数&#xff0c;表示 1∼n 中质数的个数。 数据范围 …
阅读更多...
完美解决k8s master节点无法ping node节点中的IP或Service NodePort的IP

完美解决k8s master节点无法ping node节点中的IP或Service NodePort的IP

1、问题一 使用搭建好了K8S集群&#xff0c;先是node节点加入k8s集群时&#xff0c;用的内网IP&#xff0c;导致master节点无法操作node节点中的pod&#xff08;这里的不能操作&#xff0c;指定是无法查看node节点中pod的日志、启动描述、无法进入pod内部&#xff0c;即 kubec…
阅读更多...
【GCN】GCN学习笔记一

【GCN】GCN学习笔记一

谱域图卷积 卷积 卷积定义离散空间的卷积 图卷积简介 卷积定理谱域图卷积实现思路如何定义图上的傅里叶变换拉普拉斯矩阵 &#xff08;Laplacian Matrix&#xff09;拉普拉斯矩阵的性质拉普拉斯矩阵的谱分解拉普拉斯矩阵与拉普拉斯算子 图傅里叶变换 图上的信号表示经典傅里叶变…
阅读更多...
Python Web框架的三强之争：Flask、Django和FastAPI

Python Web框架的三强之争：Flask、Django和FastAPI

JetBrains 公布 2022 Python 开发者调查结果。 完整报告地址&#xff1a;https://lp.jetbrains.com/zh-cn/python-developers-survey-2022/ 这是由 Python 软件基金会 (PSF) 和 JetBrains 共同开展的第六次官方年度 Python 开发者调查&#xff0c;回复于 2022 年 10 月至 12 …
阅读更多...
键鼠自动化2.0树形结构讲解

键鼠自动化2.0树形结构讲解

介绍 在键鼠自动化2.0中使用Qtc实现了全自定义树形结构&#xff0c;实现任务的拖拽&#xff0c;复制粘贴&#xff0c;撤销重做&#xff0c;以及包括树形结构增加序号展示&#xff0c;以及增加搜索功能 实现 1.自定义节点 // 自定义节点类 class TreeNode : public QObject …
阅读更多...
2013年12月13日 Go生态洞察：Go在App Engine上的工具、测试和并发

2013年12月13日 Go生态洞察：Go在App Engine上的工具、测试和并发

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…
阅读更多...
Java高级编程-----网络编程

Java高级编程-----网络编程

网络通信协议 通过计算机网络可以实现多台计算机连接&#xff0c;但是不同计算机的操作系统和硬件体系结构不同&#xff0c;为了提供通信支持&#xff0c;位于同一个网络中的计算机在进行连接和通信时必须要遵守一定的规则&#xff0c;这就好比在道路中行驶的汽车一定要遵守交…
阅读更多...
.NET 主流 ORM 功能介绍 大全 最新

.NET 主流 ORM 功能介绍 大全 最新

.NET主流ORM 下面是3款.NET 使用最多的ORM 测试项目发布时间微信公众号投票 (追逐时间光者)使用难度功能SqlSugar orm201426% 491票适中全EFCore orm201636% 663票较难全Dapper orm201323% 374票简单少 一、SqlSugar ORM介绍 是一款 老牌 .NET 开源多库架构ORM框架…
阅读更多...
mricorn 手动勾画ROI并保存为模版的方法步骤

mricorn 手动勾画ROI并保存为模版的方法步骤

mricorn软件手动勾画ROI&#xff1a; 这里拿一个做了切除手术的癫痫病人举例子&#xff0c;我们需要把切除区域勾画出来并保存成切除的模版。 1、将图像导入到mricorn中 2、逐层勾画ROI并填充 比较方便的是从切除区域的起始层进行勾画&#xff0c;这里为了方便展示只勾画中间…
阅读更多...
最新文章

Copyright @ 2022~2023