标签:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } table{ width: 500px; border-color: chartreuse; border-collapse: collapse; } table td{ height: 40px; } #btn{ width: 100px; height: 40px; color: #3399cc; font-size: 18px; } table input{ width: 80px; height: 30px; } </style> </head> <body> <div id="box"> <input type="button" value="create" id="btn"/> </div> <script src="../js/common.js"></script> <script src="../js/table.js"></script> <script> //获得按钮 var btn = my$("btn"); //注册事件 btn.onclick = function () { //创建一个tr var tr = document.createElement("tr"); var table = getLastElementChild(box); table.tBodies[0].appendChild(tr); //遍历头部数据 创建td for(var i =0;i<headers.length-1;i++){ //创建td var td = document.createElement("td"); //追加到tr中 tr.appendChild(td); //在td中添加文本框 td.innerHTML = "<input type=‘text‘/>" } //创建td td = document.createElement("td"); //追加到tr中 tr.appendChild(td); //在td中添加a标签 且不可跳转 td.innerHTML = "<a href=‘javascript:;‘>确定</a> <a href=‘javascript:;‘>取消</a>"; //找到取消a标签 var cancel = getLastElementChild(td); //注册事件 cancel.onclick = function () { //点击之后删除tbody中的tr table.tBodies[0].removeChild(tr); }; //找到确定按钮 var ensure = getFirstElementChild(td); //给去掉按钮注册事件 ensure.onclick = function () { //定义td遍历 var td1,td2,td3,td4; //找到tr中的第一个td td1 = getFirstElementChild(tr); //找到tr中的第一个td的下一个兄弟子元素 td2 = getNextElementSibling(td1); //找到tr中的第二个td的下一个兄弟子元素 td3 = getNextElementSibling(td2); //找到tr中的第三个td的下一个兄弟子元素 td4 = getNextElementSibling(td3); //找到tr中的第一个td中的第一个子元素的value值 var name = getFirstElementChild(td1).value; //找到tr中的第一个td的下一个兄弟子元素中的第一个子元素的value值 var department = getFirstElementChild(td2).value; //找到tr中的第二个td的下一个兄弟子元素的第一个子元素的value值 var age = getFirstElementChild(td3).value; //找到tr中的第三个td的下一个兄弟子元素的第一个子元素的value值 var salary = getFirstElementChild(td4).value; //判断文本框是否为空 if(name.length===0||department.length===0||age.length===0||salary.length===0){ alert("文本框不能为空!!!请重新输入!!"); }else{ //不为空将数据添加到数组中去 datas.push({"name":name,"department":department,"age":age,"salary":salary}); //先删除之前的table box.removeChild(table); //重新调用函数创建一个新的函数 createTable(box,headers,datas); } }; }; //表头数据 var headers = ["姓名", "部门", "年龄","工资","操作"]; //数据 var datas = [ {"name":"马闯","department":"行政","age":"18","salary":2000+"(元)"}, {"name":"马户","department":"后勤","age":"19","salary":3000+"(元)"}, {"name":"马伦","department":"技术","age":"15","salary":19000+"(元)"}, {"name":"马尧","department":"服务","age":"16","salary":4000+"(元)"}, {"name":"马震","department":"管理","age":"17","salary":16000+"(元)"}, {"name":"马云","department":"财务","age":"20","salary":5000+"(元)"} ]; var box = my$("box");
//调用函数 createTable(box,headers,datas); </script> </body> </html>
/** * Created by Administrator on 2016/6/11. */ function createTable(parentNode,headres,datas){ //创建表格 var table = document.createElement("table"); //将表格追加到父容器中 parentNode.appendChild(table); //设置table的样式 table.cellSpacing = 0; table.cellPadding = 0; table.border = "1px"; //创建表头 var thead = document.createElement("thead"); //将标题追加到table中 table.appendChild(thead); //创建tr var tr =document.createElement("tr"); //将tr追加到thead中 thead.appendChild(tr); //设置tr的样式属性 tr.style.height="50px"; tr.style.backgroundColor = "lightgray"; //遍历headers中的数据 for(var i =0;i<headres.length;i++){ //创建th var th = document.createElement("th"); //将th追加到thead中的tr中 tr.appendChild(th); //将headers的数据找到对应的th放进去 此处 用到了setInnerText()函数 调用common.js setInnerText(th,headres[i]); } //创建tbodt createTbody(parentNode,table,datas); }; function createTbody(parentNodes,table,datas){ //创建tbody var tbody = document.createElement("tbody"); //将tbody追加到table中 table.appendChild(tbody); //设置tbody的样式属性 tbody.style.textAlign = "center"; //遍历得到数据源 for(var i=0;i<datas.length;i++){ //获取没想数据 var data =datas[i]; //创建tr tr = document.createElement("tr"); //将tr追加到tbody中 tbody.appendChild(tr); //设置tbody中tr的属性 tr.style.height="40px"; //遍历对象的属性 for(var key in data){ //创建td var td = document.createElement("td"); //追加到tbody中的tr中 tr.appendChild(td); //将得到的没项属性添加到每一个td中 setInnerText(td,data[key]); } //创建操作列 td = document.createElement("td"); //追加到tr中 tr.appendChild(td); //给td设置a标签 td.innerHTML = "<a href=‘javaScript:;‘>删除</a>" //注册点击事件 //找到a标签 var link = td.children[0]; //设置a便签的属性index为1 link.index = i; //注册事件 link.onclick = function () { //得到当前a标签的索引值 var index = this.index; //删除该索引值的项 datas.splice(index,1); //删除table parentNodes.removeChild(table); //重新创建table createTable(parentNodes,headers,datas); }; //判断tr隔行变色 //鼠标移动上去高亮显示 if(i%2==0){ //奇数行 tr.style.backgroundColor = "pink"; }else{ //偶数行 tr.style.backgroundColor = "#B9FFCF"; } //注册事件高亮显示 var bg; //鼠标经过 tr.onmouseover = function () { bg = this.style.backgroundColor; this.style.backgroundColor = "#4BE1FF"; }; //鼠标离开 tr.onmouseout = function(){ this.style.backgroundColor = bg; }; } };
标签:
原文地址:http://www.cnblogs.com/lcf1314/p/5578956.html