zoukankan html css js c++ java

Js动态操作表格

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="80px" onclick="add();" class="button"/>
        <input type="button" value="丢弃" style="80px" onclick="remove();" class="button"/>
    </div>
</div>
</body>
</html>

CSS

body{
    background: url("bg1.png") no-repeat;
    background-size: cover;
}
#main{
     1000px;
    height: 800px;
    padding: 30px 10px;
    margin: 40px auto;
    font-size: 14px;
    border-top: 1px solid salmon;

}
/*仓库和弹药库的位置*/
#div1,#div3 {
    float: left;
     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{
    54px;
    border:none;
    background: transparent;
}
/*表格样式*/
table{
    border: none;
    border-spacing: 0;
     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{
     54px;
}

//全选事件
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);
}

查看全文

相关阅读:
OCP-052考试题库汇总（29）-CUUG内部解答版
 OCP-052考试题库汇总（28）-CUUG内部解答版
 OCP-052考试题库汇总（27）-CUUG内部解答版
 OCP-052考试题库汇总（26）-CUUG内部解答版
 OCP-052考试题库汇总（25）-CUUG内部解答版
 OCP-052考试题库汇总（24）-CUUG内部解答版
 007 线程的join方法
 006 线程休眠
 005 线程打断---完成线程的终结
 004 守护线程

原文地址：https://www.cnblogs.com/QianBoy/p/7592339.html

最新文章
Jungle Roads
Network
Swordfish
Oil Deposits
Tempter of the Bone
Gnome Tetravex
Multiple
iPhone X系列的获取
 swift语言版本选择
 iOS