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="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;

}

//全选事件

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);

}

Js动态操作表格的更多相关文章

JS动态生成表格后合并单元格
JS动态生成表格后合并单元格最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求请求回来后的数据动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...
js 动态生成表格案例
<1>布局:一个table表格,表格分为两个部分,上面是thead表头,表头里面仅一行,有4列(th), 下面是tbody表格内容,要求tbody中的每一行都是用js动态创建的 < ...
js动态创建表格,删除行列的小例子
js动态创建表格,删除行列的实例代码. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
js如何操作表格（常用属性方法汇总）
js如何操作表格(常用属性方法汇总) 一.总结一句话总结: 二.表格相关的属性和方法 1.1 Table 对象集合 cells[] 返回包含表格中所有单元格的一个数组. 语法:tableObject ...
js动态添加-表格逐行添加、删除、遍历取值
关于js对表格进行逐行添加,今天抽空整理了一下:新建一个html文件(没有编辑器的可以新建一个demo.txt文件,然后改后缀名为demo.html),把下面代码全部贴进去即可.功能包括:表格添加一行 ...
[HTML]js动态修改表格里面的内容
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/T ...
js动态生成表格
动态生成表格 *创建一个页面:两个输入框和一个按钮 *代码和步骤 /* 1.得到输入的行 ...
js动态增加表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
js动态创建表格------Day59
刚刚不知道怎么回事,CSDN博客一直打不开,就在博客园完毕了今天的记录,结果临关机,登录了下.发现又好了,就再多花个几分钟转下吧,也无论到底在意的是什么了,权当强迫症了... 前几天记录了动态的加入一 ...

随机推荐

IDEA搭建SSMM框架（详细过程）
IDEA搭建SSMM框架(详细过程) 相关环境 Intellij IDEA Ultimate Tomcat JDK MySql 5.6(win32/win64) Maven (可使用Intellij ...
Scrum Meeting Alpha - 9
Scrum Meeting Alpha - 9 NewTeam 2017/11/03 地点:新主楼F座二楼任务反馈团队成员完成任务计划任务安万贺完成了登陆退出功能Pull Request ...
H5定位
百度地图javaScript API 一.在html文件中引入 <script src="http://api.map.baidu.com/api?ak=Uk9tDddYkrQImXw ...
MongoDB可视化界面配置
环境:windows 10 64bit 1. 以管理员身份运行cmd cd E:\MongoDB\Server\3.4\bin 2. 在data文件夹中建立logs目录 3. 在logs目录下建立mo ...
Velocity(2)——常用语法
Velocity是一个基于java的模板引擎(template engine),它允许任何人仅仅简单的使用模板语言(template language)来引用由java代码定义的对象.作为一个比较完善 ...
对于Mongodb数据库的学习
数据库主要分为两种 1.关系型数据库(RDBS) 2.非关系性数据库(NoSQL) 而MongoDB就是非关系型数据库里的一种文档型数据库(BSON) 文档型数据库(BSON)顾名思义就是以文档的形 ...
一般处理程序获取Session方式
今天写程序得时候遇到了一个问题:ajax在对ashx进行请求时如果按照 context.Request方式直接来获取值得话获取到得是空值,因此去网上搜了一下问题.现记录如下: ashx获取sessio ...
开源纯C#工控网关+组态软件(六)图元组件
一. 图元概述图元是构成人机界面的基本单元.如一个个的电机.设备.数据显示.仪表盘,都是图元.构建人机界面的过程就是铺排.挪移.定位图元的过程. 图元设计是绘图和编码的结合.因为图元不仅有显示和 ...
RecyclerView 加入一个滑动控件bug处理 GridView只显示第一行
如果RecyclerView 多样式布局,比如要加入一个展示多个图看的需求.自然想到用gridview给嵌套一下. 想法当然是可以的,但是发现,嵌套出来的效果是,gridview只显示一行. 想想原因 ...
lua元表
__index元方法:按照之前的说法,如果A的元表是B,那么如果访问了一个A中不存在的成员,就会访问查找B中有没有这个成员.这个过程大体是这样,但却不完全是这样,实际上,即使将A的元表设置为B,而且B ...

Js动态操作表格

Js动态操作表格的更多相关文章

随机推荐

热门专题