js-1表格的增删改

其他 2019-04-15 20:14:49 阅读次数: 0

https://www.cnblogs.com/realdanielwu/p/7495228.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>动态表格</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="css/layer.css" type="text/css">
    <link rel="stylesheet" href="css/layout.css" type="text/css">
</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" 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">
            <tr>
                <td><input type="checkbox" name="item"/></td>
                <td>518</td>
                <td>lincong</td>
                <td>123455</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> 
   <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" onclick="addList()"/>
                    <input type="button" value="更新" class="btn btn-info" onclick="update()"/>
                </td>
            </tr>
        </table>   
   </form>
   <footer>by lincong</footer>
   <script>
       
      //add功能(增加数据)
      //思路：获取表单每一个input的value值，然后创建节点td,添加到上面的表格当中
      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');
        oInput2.setAttribute('type','button');
        oInput2.setAttribute('value','删除');
        oInput2.setAttribute('onclick','del(this)');
        oInput2.className = 'btn btn-danger';
        var oInput3 = document.createElement('input');
        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)
      } 
      //del单点删除功能
      //思路：添加数据的时候，需要添加对应的点击事件onclick = del(this),然后removeChild移除
      function del(obj){
          var oParentnode = obj.parentNode.parentNode;
          var olistTable = document.getElementById('listTable');
          olistTable.removeChild(oParentnode);
      }
      
      //多项删除（全部删除）
      //思路：通过checkbox的checked属性当做开关，然后通过遍历删除checked=true对应的tr行
        //全选
        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--;
                }
            }
        }
      //modify功能
      //思路：点击修改后，将td的innerHTML值传到表单中的input当中，同时用一个参数记录下点击的行数rowIndex,'更新'
      //      按钮,先找到需要修改的行数的Tr,然后将表单的值传给每一个td
    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 oTd = oTr.getElementsByTagName('td');
        rowIndex = obj.parentNode.parentNode.rowIndex;
        oNum.value = oTd[1].innerHTML;
        oUser.value = oTd[2].innerHTML;
        oPwd.value = oTd[3].innerHTML;
        oBirth.value = oTd[4].innerHTML;
        oAddre.value = oTd[5].innerHTML;
        console.log(oTd[4].innerHTML);
    }


      //update功能
      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');

          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>
   <script src="js/jquery.js"></script>
   <script src="js/layer.js"></script>

</body>
</html>

　　

<! DOCTYPE html >
< html lang= "en" >
< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >动态表格 </ title >
< link rel= "stylesheet" href= "css/bootstrap.min.css" type= "text/css" >
< link rel= "stylesheet" href= "css/layer.css" type= "text/css" >
< link rel= "stylesheet" href= "css/layout.css" type= "text/css" >
</ 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" 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" >
< tr >
< td >< input type= "checkbox" name= "item" /></ td >
< td >518 </ td >
< td >lincong </ td >
< td >123455 </ 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 >
< 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" onclick= " addList ()" />
< input type= "button" value= "更新" class= "btn btn-info" onclick= " update ()" />
</ td >
</ tr >
</ table >
</ form >
< footer >by lincong </ footer >
< script >
 
//add功能(增加数据)
//思路：获取表单每一个input的value值，然后创建节点td,添加到上面的表格当中
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');
oInput2. setAttribute( 'type', 'button');
oInput2. setAttribute( 'value', '删除');
oInput2. setAttribute( 'onclick', 'del(this)');
oInput2. className = 'btn btn-danger';
var oInput3 = document. createElement( 'input');
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)
}
//del单点删除功能
//思路：添加数据的时候，需要添加对应的点击事件onclick = del(this),然后removeChild移除
function del( obj){
var oParentnode = obj. parentNode. parentNode;
var olistTable = document. getElementById( 'listTable');
olistTable. removeChild( oParentnode);
}
 
//多项删除（全部删除）
//思路：通过checkbox的checked属性当做开关，然后通过遍历删除checked=true对应的tr行
//全选
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--;
}
}
}
//modify功能
//思路：点击修改后，将td的innerHTML值传到表单中的input当中，同时用一个参数记录下点击的行数rowIndex,'更新'
// 按钮,先找到需要修改的行数的Tr,然后将表单的值传给每一个td
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 oTd = oTr. getElementsByTagName( 'td');
rowIndex = obj. parentNode. parentNode. rowIndex;
oNum. value = oTd[ 1]. innerHTML;
oUser. value = oTd[ 2]. innerHTML;
oPwd. value = oTd[ 3]. innerHTML;
oBirth. value = oTd[ 4]. innerHTML;
oAddre. value = oTd[ 5]. innerHTML;
console. log( oTd[ 4]. innerHTML);
}


//update功能
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');

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 >
< script src= "js/jquery.js" > < / script >
< script src= "js/layer.js" > < / script >

</ body >
</ html >

猜你喜欢

转载自www.cnblogs.com/77yaer/p/10712694.html
今日推荐
周排行
Leetcode简单题61~80
解决zookeeper磁盘IO高的问题
多线程相关方法详解
Maven-setting.xml文件详解
Maven 项目的 classpath 理解
渊亭科技大数据笔试题
配置JVM内存分配
计算机网络个人学习笔记 （三）网络层 ：第三部分 连载
js中两个等号(==)和三个等号(===)的区别
用C程序自动打开电脑上的程序
每日归档
更多
2024-09-18(0)
2024-09-17(0)
2024-09-16(0)
2024-09-15(0)
2024-09-14(0)
2024-09-13(0)
2024-09-12(0)
2024-09-11(0)
2024-09-10(0)
2024-09-09(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022