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" 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="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" 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('更新成功');
}

js原生语法实现表格操作

猜你喜欢