HTML + CSS + Javascript 简易示例

要实现的效果：

页面中有一个表格显示水果的数据。
鼠标移动到表格内，就改变当前行背景色，移动到单价单元格鼠标就变成手型。
单价单元格点击进行编辑，对输入进行容错处理，编辑后计算更新小计和总计。
点击删除操作弹出提示框提醒，确认删除即删除表格一行数据，并更新总计。

效果图：

HTML

html文件：demo03.html

<html>
<head><link rel="stylesheet" type="text/css" href="css/demo03.css"><script type="text/javascript" src="js/demo03.js"></script>
</head><body><div id="div_container"><div id="div_fruit_list"><table id="tal_fruit"><tr><th class="w20">名称</th><th class="w20">单价</th><th class="w20">数量</th><th class="w20">小计</th><th class="w20">操作</th></tr><tr><td>苹果</td><td>5</td><td>21</td><td>105</td><td><img src="imgs/delete.png" class="img_delete"/></td></tr><tr><td>西瓜</td><td>7</td><td>1</td><td>7</td><td><img src="imgs/delete.png" class="img_delete"/></td></tr><tr><td>菠萝</td><td>18</td><td>3</td><td>54</td><td><img src="imgs/delete.png" class="img_delete"/></td></tr><tr><td>香蕉</td><td>3</td><td>10</td><td>30</td><td><img src="imgs/delete.png" class="img_delete"/></td></tr><tr><td>总计</td><td colspan="4">196</td></tr></table></div></div>
</body>
</html>

CSS

css文件：html03.css


body{margin: 0;padding: 0;background-color: lightgrey;
}
div{position: relative;float: left;
}
input{font-size: 22px;
}#div_container{width: 80%;height: 100%;border: 1px solid grey;margin-left: 10%;float: left;background-color: honeydew;border-radius: 4px;
}#div_fruit_list{width: 100%;
}#tal_fruit {width: 60%;margin-left: 20%;margin-top: 100px;line-height: 40px;
}#tal_fruit , #tal_fruit tr , #tal_fruit th , #tal_fruit td {border: 2px solid grey;border-collapse: collapse;text-align: center;font-family: "黑体";color: threeddarkshadow;font-size: 22px;
}.w20{width: 20%;
}.img_delete{width: 24px;height: 24px;
}

Javascript

js文件：demo03.js


window.onload = function() {//当页面加载完成，我们需要绑定各种事件var fruitTbl = document.getElementById("tal_fruit");//获取表格中的所有行var rows = fruitTbl.rows;for (var i = 1; i < rows.length - 1; i++) {var ti = rows[i];//1.绑定鼠标悬浮以及离开时设置背景颜色事件//方法不加小括号，表示方法绑定到这个事件ti.onmouseover=showBgColor;ti.onmouseout = clearBgColor;//获取tr这一行的所有单元格var cells = ti.cells;var priceTd = cells[1];//2.绑定鼠标悬浮在单价单元格变手势的事件priceTd.onmouseover = showHand;//3.绑定鼠标点击单价单元格的事件priceTd.onclick = editPrice;//7.绑定删除小图标的点击事件var img = cells[4].firstChild;if (img && img.tagName == "IMG") {//绑定单击事件img.onclick = deleteFruit;}}
}//当鼠标悬浮时，显示背景颜色
function showBgColor(){// event : 当前发生的事件// event.srcElement : 事件源if (event && event.srcElement && event.srcElement.tagName == "TD") {var td = event.srcElement;// td.parentElement 表示获取td的父元素 -> TRvar tr = td.parentElement;//如果想要通过js代码设置某节点的样式，则需要加上 .styletr.style.backgroundColor = "royalblue";//var tds = tr.cells;for (var i = 0; i < tds.length; i++) {tds[i].style.color = "white";}}
}//当鼠标离开时，恢复原始样式
function clearBgColor(){if (event && event.srcElement && event.srcElement.tagName == "TD") {var td = event.srcElement;var tr = td.parentElement;tr.style.backgroundColor = "transparent";var tds = tr.cells;for (var i = 0; i < tds.length; i++) {tds[i].style.color = "threeddarkshadow";}}
}//当鼠标悬浮在单价单元格时，显示手势
function showHand() {if (event && event.srcElement && event.srcElement.tagName == "TD") {var td = event.srcElement;// cursor : 光标td.style.cursor="hand"}
}//当鼠标点击单价单元格时进行价格编辑
function editPrice() {if(event && event.srcElement && event.srcElement.tagName == "TD") {var priceTd = event.srcElement;//目的是判断当前priceTD有子节点，而且第一个子节点是文本节点，TextNode对应的是3  ElementNote对应的是1if(priceTd.firstChild && priceTd.firstChild.nodeType == 3) {//innerText 表示设置或者获取当前节点的内部文本var oldPrice = priceTd.innerText;//innerHtml 表示设置当前节点的内部HTMLpriceTd.innerHTML="<input type='text' size='4'/>";// <td><input type='text' size='4'/></td>var input = priceTd.firstChild;if (input.tagName == "INPUT"){input.value = oldPrice;//选中输入框内部的文本input.select();//4.绑定输入框失去焦点，失去焦点，更新单价input.onblur=updatePrice;//8.在输入框上绑定键盘按下的事件，此处我需要保证用户输入的是数字input.onkeydown=checkInput;}}}
}//更新单价
function updatePrice() {if(event && event.srcElement && event.srcElement.tagName == "INPUT") {var input = event.srcElement;var newPrice = input.value;//input节点的父节点是tdvar priceTd = input.parentElement;priceTd.innerHTML = newPrice;//5.更新当前行的小计这一个格子的值//priceTd.parentElement td的父元素是trupdateXj(priceTd.parentElement);}
}//更新指定行的小计
function updateXj(tr) {if (tr && tr.tagName == "TR") {var tds = tr.cells;var price = tds[1].innerText;var count = tds[2].innerText;//innerText获取到的值的类型是字符串类型，因此需要类型转换，才能进行数学运算var xj = parseInt(price) * parseInt(count);tds[3].innerText = xj;//6.更新总计updateZj();}
}//更新总计
function updateZj() {var fruitTbl = document.getElementById("tal_fruit");var rows = fruitTbl.rows;var sum = 0;for (var i = 1; i < rows.length - 1; i++) {var tr = rows[i];var xj = parseInt(tr.cells[3].innerText);sum = sum + xj;}rows[rows.length - 1].cells[1].innerText = sum;
}//删除指定行
function deleteFruit() {if (event && event.srcElement && event.srcElement.tagName == "IMG") {//alert表示弹出一个对话框，只有确定按钮//confirm表示弹出一个对话框，有确定和取消按钮。当点击确定返回true，否则返回falseif (window.confirm("是否确认删除当前库存记录")) {var img = event.srcElement;var tr = img.parentElement.parentElement;var fruitTbl = document.getElementById("tal_fruit");fruitTbl.deleteRow(tr.rowIndex);updateZj();}}
}//检验键盘摁下的值的方法
function checkInput() {var kc = event.keyCode;// 0~9 : 48~57//backspace : 8//enter : 13console.log(kc);if ( !((kc >= 48 && kc<=57) || kc == 8 || kc == 13) ) {event.returnValue = false;}if (kc == 13) {event.srcElement.blur();}
}

显示效果

鼠标放在单元格时改变当前行的背景色，放在单价单元格上鼠标变成手型

点击单价单元格进行编辑

改变单价后计算小计和总计并更新

点击删除操作弹出提示框

删除一行数据后更新总计数据

HTML + CSS + Javascript 简易示例相关推荐

HTML+CSS+Javascript简易记账本（localStorage）
续上github那几个小项目,接着来记账本数据在本地存储中 Window.localStorage 只读的localStorage 属性允许你访问一个Document 源(origin)的对象 St ...
前端面试+学习笔记（HTML+CSS+JavaScript+ES6+Vue+NodeJs）
前端面试+学习笔记(HTML+CSS+JavaScript+ES6+Vue+NodeJs) 一. HTML 1. 盒子模型是什么:每个元素被表示为一个矩形的盒子,有四个部分组成:内容(content ...
情人节程序员用HTML网页表白【在一起计时】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
情人节程序员用HTML网页表白【嫦娥奔月(满屏泡泡)】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
HTML+CSS+JavaScript速成
文章目录 HTML/CSS/JavaScript HTML Html HyperText Markup Language内容 font标签 font-01 font-011 图象 image-01 表 ...
HTML + CSS + JavaScript速成
文章目录 HTML/CSS/JavaScript HTML Html HyperText Markup Language内容 font标签 font-01 font-011 图象 image-01 表 ...
情人节程序员用HTML网页表白【超具创意的网页生日快乐】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
情人节程序员用HTML网页表白【制作属于我们的爱情相册网页】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
情人节程序员用HTML网页表白【爱心_文字音乐告白】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...

HTML + CSS + Javascript 简易示例

HTML

CSS

Javascript

显示效果

HTML + CSS + Javascript 简易示例相关推荐

最新文章

热门文章