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=" 100%;;">
<thead>
<tr style=" 100%;">
<th>选中</th>
<th>编号</th>
<th>姓名</th>
<th>密码</th>
<th>生日</th>
<th>地址</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" onclick="checkAll(this)"/></td>
<td colspan="6"><a href="javascript:;" class="btn btn-danger" role="button" onclick="delAll(this)">全部删除</a></td>
</tr>
</thead>
<tbody id="listTable" style=" 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" onclick="del(this)" />
<input type="button" name="" value="修改" class="btn btn-info" onclick="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" onclick="addList()" />
<input type="button" value="更新" class="btn btn-info" id="" onclick="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设置属性为checkbox oInput.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('更新成功'); }