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中往表格里插入数据，可以通过以下步骤实现：
获取对应的表格元素，可以使用
document.getElementById、document.querySelector等方法获取。创建需要插入的数据，可以使用数组、JSON对象等形式。
循环遍历数据，使用
insertRow和insertCell等方法动态创建表格行和单元格。在单元格中填充数据，可以使用
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的参数，因为第一行已经被表头占用。
