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的参数，因为第一行已经被表头占用。