Js动态操作表格

时间：2023-03-08 16:47:46

HTML

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>装备</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="ihurtcription" content="this is my page">

    <link href="style.css" type="text/css" rel="stylesheet">

    <script src="js.js"></script>

</head>

<body>

<div id="main">

    <!--        仓库-->

    <div id="div1">

        <div id="tab2">

            <span>

                仓库

            </span>

            <table border="1" width="100%" class="tabClass">

                <thead>

                <tr>

                    <th>全选<input type="checkbox" id="check_all3" onclick="myclick('item1');"></th>

                    <th>编号</th>

                    <th>名称</th>

                    <th>外观</th>

                </tr>

                </thead>

                <tbody id="tab_left">

                <tr>

                    <td><input type="checkbox" name="item1" value="1"></td>

                    <td><input type="text" id="id1" value="1"></td>

                    <td><input type="text" id="na1" value="冲锋枪"></td>

                    <td><img  id="ihurt1" src="1.png"></td>

                </tr>

                </tbody>

            </table>

        </div>

    </div>

    <!--        操作-->

    <!--    弹药库-->

    <div id="div3">

        <div id="tab1">

            <span>弹药库</span>

            <table border="1"  class="tabClass">

                <thead>

                <tr>

                    <th>全选<input type="checkbox" id="check_all" onclick="myclick('item');"></th>

                    <th>编号</th>

                    <th>名称</th>

                    <th>外观</th>

                </tr>

                </thead>

                <tbody id="tab_right">

                <tr>

                    <td><input type="checkbox" name="item" value="2"></td>

                    <td><input type="text" id="id2" value="2"></td>

                    <td><input type="text" id="na2" value="冲锋枪"></td>

                    <td><img  id="ihurt2" src="1.png"></td>

                </tr>

                <tr>

                    <td><input type="checkbox"  name="item" value="3"></td>

                    <td><input type="text" id="id3" value="3"></td>

                    <td><input type="text" id="na3" value="步枪"></td>

                    <td><img  id="ihurt3" src="2.png"></td>

                </tr>

                <tr>

                    <td><input type="checkbox"  name="item" value="4"></td>

                    <td><input type="text" id="id4" value="4"></td>

                    <td><input type="text" id="na4" value="轻机枪"></td>

                    <td><img  id="ihurt4" src="3.png"></td>

                </tr>

                </tbody>

            </table>

        </div>

    </div>

    <div id="do">

        <input type="button" value="添加" style="width:80px" onclick="add();" class="button"/>

        <input type="button" value="丢弃" style="width:80px" onclick="remove();" class="button"/>

    </div>

</div>

</body>

</html>

CSS

body{

    background: url("bg1.png") no-repeat;

    background-size: cover;

}

#main{

    width: 1000px;

    height: 800px;

    padding: 30px 10px;

    margin: 40px auto;

    font-size: 14px;

    border-top: 1px solid salmon;

}

/*仓库和弹药库的位置*/

#div1,#div3 {

    float: left;

    width: 48%;

    height: 450px;

    overflow: auto;

    border-bottom: 1px solid salmon;

    margin-right: 20px;

}

/* 仓库和弹药库字体的样式 */

#div1 span,#div3  span{

    font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;

    font-size: 25px;

    display: block;

    color: #888;

    text-align: left;

}

/*按钮层*/

#do{

    clear: both;

    padding-top:15px;

    text-align: left;

}

/* 每个框的大小 */

#tab_left input,#tab_right input{

    width:54px;

    border:none;

    background: transparent;

}

/*表格样式*/

table{

    border: none;

    border-spacing: 0;

    width: 100%;

}

.tabClass td, .tabClass th{

    border:none;

    border-bottom: 1px solid #537691;

    padding: 10px;

    text-align: left;

}

.tabClass th{

    border: none;

    background-color: #858A8D;

}

/*按钮样式*/

.button{

    background: #dce9f9;

    border: none;

    padding: 10px 25px 10px 25px;

    cursor: pointer;

    color: #444;

}

img{

    width: 54px;

}

JS

//全选事件

function myclick(itemName){

    var aitems = document.getElementsByName(itemName);

    for(var i = 0;i < aitems.length;i++){

        if(!aitems[i].checked){

            aitems[i].checked = true;

        }else{

            aitems[i].checked = false

        }

    }

}

//弹药库到仓库

function add(){

    var ary = [];

    var aitems = document.getElementsByName("item");

    for(var i = 0;i < aitems.length;i++){

        if(aitems[i].checked){

            ary[i] = document.getElementById("id"+aitems[i].value).parentNode.parentNode.rowIndex;//保存下所选行的索引

            removeRight(aitems[i].value);//移除弹药库的一行

        }

    }

    /*移除掉添加到仓库的一行*/

    for(var i = ary.length;i >0;i--){

        var oRightTbody = document.getElementById("tab_right");

        //判断数组ary里的值是不是行索引

        if(!isNaN(ary[i-1])){

            oRightTbody.deleteRow(ary[i-1]-1);

            //移除表格的所选行

        }

    }

    document.getElementById("check_all").checked = false;

    //全选复选框置为false

}

/*移除弹药库，添加仓库*/

function removeRight(op){

    var iwbid = document.getElementById("id"+op).value;

    var iwbna = document.getElementById("na"+op).value;

    var oLeftTbody = document.getElementById("tab_left");

    var tr = document.createElement("tr");

    var td1 = document.createElement("td");

    var td2 = document.createElement("td");

    var td3 = document.createElement("td");

    var td4 = document.createElement("td");

    td1.innerHTML = "<input type='checkbox' id='check_one' name='item1' value='"+iwbid+"'>";

    td2.innerHTML = "<input type='text' id='id"+iwbid+"' value='"+iwbid+"'>";

    td3.innerHTML = "<input type='text' id='na"+iwbid+"' value='"+iwbna+"'>";

    td4.innerHTML = "<img  id='ihurt"+iwbid+"' src='"+iwbid+".png'>";

    tr.appendChild(td1);

    tr.appendChild(td2);

    tr.appendChild(td3);

    tr.appendChild(td4);

    oLeftTbody.appendChild(tr);

}

/*仓库到弹药库*/

function remove(){

    var ary1 = [];

    var aitems = document.getElementsByName("item1");

    for(var i = 0;i < aitems.length;i++){

        if(aitems[i].checked){

            //先保存所选行的索引 在移除掉所选行

            ary1[i] = document.getElementById("id"+aitems[i].value).parentNode.parentNode.rowIndex;

            //保存下所选行的索引

            removeLeft(aitems[i].value);//移值

        }

    }

    for(var i = ary1.length;i >0;i--){

        var oRightTbody = document.getElementById("tab_left");

        //判断数组ary里的值是不是行索引

        if(!isNaN(ary1[i-1])){

            oRightTbody.deleteRow(ary1[i-1]-1);

            //移除表格的所选行

        }

    }

    document.getElementById("check_all3").checked = false;

    //全选复选框置为false

}

/*移除仓库，返回弹药库*/

function removeLeft(op) {

    var iwbid = document.getElementById("id" + op).value;

    var iwbna = document.getElementById("na" + op).value;

    var oRightTbody = document.getElementById("tab_right");

    var tr = document.createElement("tr");

    var td1 = document.createElement("td");

    var td2 = document.createElement("td");

    var td3 = document.createElement("td");

    var td4 = document.createElement("td");

    td1.innerHTML = "<input type='checkbox' id='check_one' name='item' value='" + iwbid + "'>";

    td2.innerHTML = "<input type='text' id='id" + iwbid + "' value='" + iwbid + "'>";

    td3.innerHTML = "<input type='text' id='na" + iwbid + "' value='" + iwbna + "'>";

    td4.innerHTML = "<img  id='ihurt"+iwbid+"' src='"+iwbid+".png'>";

    tr.appendChild(td1);

    tr.appendChild(td2);

    tr.appendChild(td3);

    tr.appendChild(td4);

    oRightTbody.appendChild(tr);

}

相关文章