纯js实现数据的增删改查

最新推荐文章于 2023-03-30 10:52:21 发布

chushiwu2371

最新推荐文章于 2023-03-30 10:52:21 发布

阅读量639

点赞数

文章标签：嵌入式 javascript ViewUI

原文链接：https://my.oschina.net/u/3643035/blog/1793170

版权

<!DOCTYPE html>
<html>
<head>
   <title>原生js 实现用户的增删改查</title>
       <meta charset="utf8">
       <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
       <script>
       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;
               var oTr = document.createElement('tr');
               var oTd1 = document.createElement('td');
               var oInput = document.createElement('input');
               oTd1.appendChild(oInput);
               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);
           }



           //删除数据
           function del(obj){
                   var oParentnode = obj.parentNode.parentNode;
                   var olistTable = document.getElementById('listTable');
                   olistTable.removeChild(oParentnode);
               }

       //批量删除数据
           //全选
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++){
if(items[j].checked)//如果item被选中
{
var oParentnode = items[j].parentNode.parentNode;
olistTable.removeChild(oParentnode);
j--;
}
}
}
   //修改功能
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');
var oTr = obj.parentNode.parentNode;
var aTd = oTr.getElementsByTagName('td');
rowIndex = obj.parentNode.parentNode.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(aTd[4].innerHTML);
//alert(i);

}
//更新功能
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');
var oMytable = document.getElementById('mytable');
//alert(rowIndex);
//var aTd = rowIndex.cells;
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;
}
       </script>
   </head>
   <body>
   <table class="table table-hover table-bordered " id="mytable">
       <thead>
           <tr>
               <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">
               <tr>
                   <td><input type="checkbox" name="item" οnclick="checkAll(this)"/></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>
       <hr/>
       <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>