js原生语法实现表格操作

HTML页面：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" type="text/css" href="bootstrap.css"/><script src="jquery.js"></script><script src="1.js" type="text/javascript" charset="utf-8"></script><script src="layer.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="layer.css"/>
</head>
<body><table class="table table-hover table-bordered" id="mytable" style="width: 100%;;"><thead><tr style="width: 100%;"><th>选中</th><th>编号</th><th>姓名</th><th>密码</th><th>生日</th><th>地址</th><th>操作</th></tr><tr><td><input type="checkbox" οnclick="checkAll(this)"/></td><td colspan="6"><a href="javascript:;" class="btn btn-danger" role="button" οnclick="delAll(this)">全部删除</a></td></tr></thead><tbody id="listTable" style="width: 100%;">    <tr><td><input type="checkbox" name="item" /></td><td>100806131234</td><td>劈日e斩月</td><td>123456</td><td>1995-08-07</td><td>北京市朝阳区艾欧尼亚</td><td><input type="button" name="" value="删除" class="btn btn-danger" οnclick="del(this)" /><input type="button" name="" value="修改" class="btn btn-info" οnclick="modify(this)" /></td></tr></tbody></table><h1>新增数据</h1><form><table class="table table-hover table-bordered"><tr><th>编号</th><td><input type="text" name="" class="form-control" id="num" /></td></tr><tr><th>姓名</th><td><input type="text" name="" class="form-control" id="username" /></td></tr><tr><th>密码</th><td><input type="password" name="" class="form-control" id="pwd" /></td></tr><tr><th>生日</th><td><input type="date" name="" class="form-control" id="birth" /></td></tr><tr><th>地址</th><td><input type="text" name="" class="form-control" id="addre" /></td></tr><tr><td colspan="2"><input type="reset" value="重置" class="btn btn-primary" id="reset" />   <input type="button" value="添加"  class="btn btn-success" id="add"  οnclick="addList()" /><input type="button" value="更新"  class="btn btn-info" id=""  οnclick="update()" /></td></tr></table></form>
</body>
</html>

JS文件：

//添加数据
function addList(){var oNum=document.getElementById('num').value;var oUser=document.getElementById('username').value;var oPwd=document.getElementById('pwd').value;var oBirth=document.getElementById('birth').value;var oAddre=document.getElementById('addre').value;console.log(oNum);console.log(oUser);console.log(oPwd);console.log(oBirth);console.log(oAddre);
//    创建tr标签var oTr=document.createElement('tr');var oTd1=document.createElement('td');var oInput=document.createElement('input');//将input标签添加到td上oTd1.appendChild(oInput);//给input设置属性为checkboxoInput.setAttribute('type','checkbox');oInput.setAttribute('name','item');var oTd2=document.createElement('td');oTd2.innerHTML=oNum;var oTd3=document.createElement('td');oTd3.innerHTML=oUser;var oTd4=document.createElement('td');oTd4.innerHTML=oPwd;var oTd5=document.createElement('td');oTd5.innerHTML=oBirth;var oTd6=document.createElement('td');oTd6.innerHTML=oAddre;var oTd7=document.createElement('td');var oInput2=document.createElement('input');var oInput3=document.createElement('input');oInput2.setAttribute('type','button');oInput2.setAttribute('value','删除');oInput2.setAttribute('onclick','del(this)');oInput2.className='btn btn-danger';oInput3.setAttribute('type','button');oInput3.setAttribute('value','修改');oInput3.setAttribute('onclick','modify(this)');oInput3.className='btn btn-info';oTd7.appendChild(oInput2);oTd7.appendChild(oInput3);oTr.appendChild(oTd1);oTr.appendChild(oTd2);oTr.appendChild(oTd3);oTr.appendChild(oTd4);oTr.appendChild(oTd5);oTr.appendChild(oTd6);oTr.appendChild(oTd7);var olistTable=document.getElementById('listTable');olistTable.appendChild(oTr);layer.msg('添加节点成功');
}
//单点对应删除
function del(obj){var oParentnode= obj.parentNode.parentNode;console.log(oParentnode);var olistTable=document.getElementById('listTable');//删除olistTable下的一个的子节点olistTable.removeChild(oParentnode);layer.msg('删除单项成功');
}//多项删除(全部删除) 需要checkAll方法与delAll方法
function checkAll(c){var status = c.checked;var oItems = document.getElementsByName('item');for (var i=0;i<oItems.length;i++) {oItems[i].checked =status;}
}
//delAll功能
function delAll(){var olistTable = document.getElementById('listTable');var items = document.getElementsByName('item');for (var j=0;j<items.length;j++) {//如果item被选中if (items[j].checked) {var oParentnode = items[j].parentNode.parentNode;olistTable.removeChild(oParentnode);j--;}}layer.msg('删除多项成功');
}//修改功能
function modify(obj){var oNum=document.getElementById('num');var oUser=document.getElementById('username');var oPwd=document.getElementById('pwd');var oBirth=document.getElementById('birth');var oAddre=document.getElementById('addre');console.log(oNum);console.log(oUser);console.log(oPwd);console.log(oBirth);console.log(oAddre);//获取到父节点var oTr=obj.parentNode.parentNode;console.log(oTr);//获取到该行数据var aTd=oTr.getElementsByTagName('td');console.log(aTd);rowIndex=obj.parentNode.parentNode.rowIndex;console.log(rowIndex);oNum.value = aTd[1].innerHTML;oUser.value = aTd[2].innerHTML;oPwd.value = aTd[3].innerHTML;oBirth.value = aTd[4].innerHTML;oAddre.value = aTd[5].innerHTML;console.log(oNum.value);console.log(oUser.value);console.log(oPwd.value);console.log(oBirth.value);console.log(oAddre.value);//console.log(aTd[5].innerHTML);
}//更新功能
function update(){var oNum = document.getElementById('num');var oUser = document.getElementById('username');var oPwd = document.getElementById('pwd');var oBirth = document.getElementById('birth');var oAddre = document.getElementById('addre');console.log(oNum);console.log(oUser);console.log(oPwd);console.log(oBirth);console.log(oAddre);var oMytable = document.getElementById('mytable');console.log(oMytable);console.log(oMytable.rows[rowIndex].cells);oMytable.rows[rowIndex].cells[1].innerHTML=oNum.value;oMytable.rows[rowIndex].cells[2].innerHTML=oUser.value;oMytable.rows[rowIndex].cells[3].innerHTML=oPwd.value;oMytable.rows[rowIndex].cells[4].innerHTML=oBirth.value;oMytable.rows[rowIndex].cells[5].innerHTML=oAddre.value;layer.msg('更新成功');
}

转载于:https://www.cnblogs.com/SofuBlue/p/9068743.html

js原生语法实现表格操作相关推荐

JS数组去重及表格操作行数据方法总结
数组去重一.利用ES6 Set去重(ES6中最常用) function unique (arr) {return Array.from(new Set(arr)) } var arr = [1,1, ...
原生js封装table表格操作，获取任意行列td，任意单行单列方法
V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...
js实现表格操作-排序
用js实现表格操作,点击th,则根据该th所属列的数据排序,点击一次降序,第二次点击升序. 表格代码: <table> <thead><tr><th>姓 ...
原生JS实现弹幕的简单操作速成
JS实现弹幕的简单操作现在很多的直播平台或者视频平台都会用到弹幕加强和观众的互动效果,那么如何用JS实现这样的效果呢,用一个初学者的方法记录下这个方法,欢迎大牛指导. 首先需要操作文档必须拿到Dom ...
Ajax -模板引擎方法 -循环、分支、原生语法、实例
模板引擎 - 循环 <!DOCTYPE html> <html lang="en"><head><meta charset="U ...
elementui表格宽度适应内容_解决elementui表格操作列自适应列宽
业务需要前端根据用户权限动态显示对应按钮,直接把操作列的列宽写死的话,在按钮少的情况下不是那么好看,所以想到了一个骚操作... 写死宽度时是这样的: 开始给操作列绑定宽度属性 :width=&quo ...
elementui表格宽度适应内容_解决elementui表格操作列自适应列宽代码示例
本篇文章小编给大家分享一下解决elementui表格操作列自适应列宽代码示例,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 写死宽度时是这样的: 开始 ...
4、jquery表格操作
1.<html> 2.<head> 3.<title>jquery表格操作</title> 4.<script language="ja ...
小汤学编程之JavaScript学习day01——认识JS、JS基础语法
一.认识JS 1.JavaScript的组成 2.浏览器执行js简介 3.JavaScript是什么? 4.扩展内容二.JS基础语法 1.代码书写位置 2.变量 ...
js创建10万行表格页面显示10万行数据
js创建10万行表格页面显示10万行数据 <html> <head></head> <style> table { border-collap ...

js原生语法实现表格操作

js原生语法实现表格操作相关推荐

最新文章

热门文章