js-1表格的增删改
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 > < script > var index = layer. load( 0,{ shade: false}); //0代表加载的风格，支持0-2 //loading层 var index = layer. load( 1,{ shade:[ 0.4, "#000"], //0.1透明度的白色背景 time: 1500 }); < / script > </ body > </ html >
更多精彩
