html+css+js 动态表格改动

html代码：

<html lang="en">
<head><meta charset="UTF-8"><link rel="stylesheet" href="test.css"><script language="JavaScript" src="test.js"></script>
</head>
<body>
<div id="container"><table id="table_fruit"><tr ><th >名称</th><th >单价</th><th>数量</th><th>小计</th><th>操作</th></tr><tr ><td>苹果</td><td >5</td><td>20</td><td>100</td><td><img src="../javascript/1.jpg" height="24px" /></td></tr><tr ><td>菠萝</td><td>5</td><td>20</td><td>100</td><td><img src="../javascript/1.jpg" height="24px" /></td></tr><tr ><td>榴莲</td><td>5</td><td>20</td><td>100</td><td><img src="../javascript/1.jpg" height="24px" /></td></tr><tr ><td>总计</td><td colspan="4">300</td></tr></table><hr/><table id="table1"><tr><td>名称:</td><th><input type="text" id="name"></th></tr><tr><td>单价</td><th><input type="text" id="money"></th></tr><tr><td>数量</td><th><input type="text" id="num"></th></tr><tr><td><input type="button" value="添加" class="btn" id="add"> </td><td><input type="button" value="重置" class="btn" id="reset"> </td></tr></table>
</div>
</body>
</html>

css代码

body{margin: 0;padding: 0;
}
div{position: relative;float: left;
}
#container{width: 80%;height: 100%;border: 1px solid blue;margin-left: 10%;}
#table_fruit , #table_fruit th , #table_fruit tr , #table_fruit td {border: 1px solid gray;/* 边框合并 */border-collapse: collapse;/*  居中  */text-align: center;line-height: 28px;
}
#table_fruit{width: 60%;margin-top: 120px;margin-left: 20%;
}
#table1{/* 边框合并 */border-collapse: collapse;/*  居中  */text-align: center;line-height: 28px;width: 40%;margin-left: 30%;
}
.btn{width: 90px;height: 24px;
}

js代码：

//window当前窗口
window.onload = function (){//更新总价updateZJ();//当页面加载完成后，1.jpg进行绑定事件//根据id获取到表格var table_fruit = document.getElementById("table_fruit");//获取表格中的所有的行var rows = table_fruit.rows;for(var i = 0;i<rows.length-1;i++){var tr = rows[i];//1.绑定鼠标悬浮以及离开设置背景颜色事件tr.onmouseover = show;  //这里是show而不是show()，报错tr.onmouseout = clearBG;//获取tr这一行的所有单元格var cells = tr.cells;var priceTD = cells[1];//2.绑定鼠标悬浮在单价单元格变手势的事件priceTD.onmouseover = showHand;//3.绑定鼠标点击单价单元格的事件priceTD.onclick = editPrice;cells[2].onclick = editPrice;//4.绑定删除功能var img = cells[4].firstChild;if(img && img.tagName == "IMG"){img.onclick = del;}}//绑定重置按钮功能var btnret = document.getElementById("reset");btnret.onclick = reset;//绑定添加按钮功能var btnadd = document.getElementById("add");btnadd.onclick = addNew;//规范输入var num = document.getElementById("num");num.onkeydown = checkInput;var money = document.getElementById("money");money.onkeydown = checkInput;}
//设置重置按钮功能
function reset(){if(event && event.srcElement && event.srcElement.tagName == "INPUT") {var name = document.getElementById("name").parentElement;name.innerHTML = "<input type=\"text\" id=\"name\">";var num = document.getElementById("num").parentElement;num.innerHTML = "<input type=\"text\" id=\"num\">";var money = document.getElementById("money").parentElement;money.innerHTML = "<input type=\"text\" id=\"money\">";}
}
//设置添加按钮功能
function addNew(){if(event && event.srcElement && event.srcElement.tagName == "INPUT") {var name = document.getElementById("name");var num = document.getElementById("num");var money = document.getElementById("money");//获取添加的行var tr = document.getElementById("table_fruit").insertRow(1);var td1 = document.createElement("td");var td2 = document.createElement("td");var td3 = document.createElement("td");var td4 = document.createElement("td");var td5 = document.createElement("td");td1.innerText = name.value;td2.innerText = money.value;td2.onmouseover = showHand;td2.onclick = editPrice;td3.innerText = num.value;td3.onclick = editPrice;td4.innerText = parseInt(money.value)*parseInt(num.value);td5.innerHTML = "<img src=\"../javascript/1.jpg\" height=\"24px\" />";//绑定删除功能td5.onclick = del;tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);tr.appendChild(td4);tr.appendChild(td5);tr.onmouseover = show;tr.onmouseout = clearBG;//更新总价updateZJ()}
}
//当鼠标悬浮时，改变背景颜色
function show(){//event:当前发生的事件//event.srcElement:事件源if(event && event.srcElement && event.srcElement.tagName=="TD"){var td = event.srcElement;//td.parentElement 表示获取td的父元素var tr = td.parentElement;//如果想要通过js代码设置某个节点的样式，则需要加上.styletr.style.backgroundColor = "navy";//tr.cells表示获取这个tr中的所有的单元格var tds =  tr.cells;for(var i = 0;i<tds.length;i++){tds[i].style.color = "white";}}
}//当鼠标移开时，恢复原来的颜色
function clearBG(){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 = "black";}}
}//当鼠标悬浮在单价单元格上，显示手势
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 td = event.srcElement;//判断是否为td是否有子节点且第一个节点是文本节点(对应的是3)if(td.firstChild && td.firstChild.nodeType== 3) {//innerText表示设置或者获取当前节点内部的文本var oldPrice = td.innerText;//innerHTML 表示设置当前节点的内部htmltd.innerHTML = "<input type='text' size='4' />";//现在等价于：<td><input type='text' size='4' /></td>//firstChild获取第一个子节点,即为<input>var input = td.firstChild;if (input.tagName == "INPUT") {input.value = oldPrice;//直接选中输入框内部的文本input.select();//失去焦点(onblur)，更新单价input.onblur = updatePrice;//绑定键盘按下的事件,包装用户输入的是数字input.onkeydown = checkInput;}}}
}
//更新单价
function updatePrice(){if(event && event.srcElement && event.srcElement.tagName=="INPUT"){var input = event.srcElement;var newPrice = input.value;//input节点的父节点是tdvar td = input.parentElement;td.innerText = newPrice;//更新当前行的小计 td.parentElement当前行trupdateXJ(td.parentElement);}
}function updateXJ(tr){if(tr && tr.tagName == "TR"){var tds = tr.cells;var price = tds[1].innerText;var num = tds[2].innerText;//字符串转换成数字tds[3].innerText = parseInt(price) * parseInt(num);//更新总计updateZJ();}
}
function updateZJ(){var table = document.getElementById("table_fruit");var rows = table.rows;var sum = 0;for(var i = 1;i<rows.length-1;i++){var cells = rows[i].cells;// sum += parseInt(cells[3]);获取的是单元格sum += parseInt(cells[3].innerText);}rows[rows.length-1].cells[1].innerText = sum;
}//检验键盘按下的方法
function checkInput(){var kc = event.keyCode;//回车：13 删除：8console.log(kc);if(!((kc>=48 && kc<=57) || kc==8 || kc==13)){//取消效果event.returnValue = false;}if(kc==13)//失去焦点的时候触发event.srcElement.blur();
}
//删除功能
function del(){if(event && event.srcElement && event.srcElement.tagName=="IMG"){if(confirm("是否确认删除当前行")){var img = event.srcElement;var tr = img.parentElement.parentElement;var table = document.getElementById("table_fruit");table.deleteRow(tr.rowIndex);updateZJ();}}
}//alert表示只弹出一个对话框，只有确定按钮
//confirm表示弹出一个对话框，有确定和取消按钮，确定为true;否则为false

html+css+js 动态表格改动相关推荐

Node.js 动态表格大文件下载实践
前言最近优化了几个新人写出的动态表格文件下载接口的性能瓶颈,感觉非常有必要总结一篇文章作为文档来抛砖引玉,以促进大家学习一起写出更专业的代码. HTTP 文件下载讲具体问题之前需要先了解一些 HT ...
关于Angular Js动态表格合并单元格的一点见解
记第一篇笔记 hell OwO rld 最近公司有一点点小需求,做个另类的表格,要求动态的样式(PS:不能直接写死那种),没办法打工人只能硬着头皮去干. 网上传的一 ...
css -- js动态改变before和after
before和after也算是css里面最常见的元素了,而我却一直不太了解,再不学一下就真的太不像话了.所以学习一下,记记笔记. 1. before && after 伪元素,也可以解 ...
html js 动态表格数据,HTML+JS动态表格
1. 设置固定列 ID日期星期 propName -- 属性名 valCalc -- 设置值时, 特定回调函数 2. 动态生成可变列这里模拟服务器获取数据 // 返回数据的格式: /* { poin ...
CSS+JS动态时钟（获取当前时间）
话不多说,先上代码 <!DOCTYPE html> <html><head><meta charset="utf-8"><ti ...
小女子需要各位博友帮忙—— 一个关于JS 动态表格合并拆分问题
没有在首页上发过文章,今天是第一次,而且还是求助性的文章.希望大家帮我提供解决办法(*^__^*) . 现在正在做一个关于试验项目的插件. 基本功能:由用户自己来设计试验项目的表格框架以及计算公式(如 ...
【黑马JS比较】用JavaScripts的DOM对象实现动态表格
案例: 在表格上可以实现添加和删除操作思路: 代码: html: <!DOCTYPE html> <html><head><title>动态表格< ...
Js（Css）动态引用方法–Js(css)的统一管理
引自:http://pm.htjs.net/cbb Javascript(Css)组件在Web中的访问地址基本上要求基于Url的相对地址或绝对地址,如果地址出现错误那么Web访问时将出现异常,组件也就 ...
js动态创建表格以及赋值
1.使用js动态创建表格 (1)不可编辑的表格 function creatTableA() {var tbody = document.querySelector('#tableA');for (v ...

html+css+js 动态表格改动

html+css+js 动态表格改动相关推荐

最新文章

热门文章