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博客一直打不开,就在博客园完毕了今天的记录,结果临关机,登录了下.发现又好了,就再多花个几分钟转下吧,也无论到底在意的是什么了,权当强迫症了... 前几天记录了动态的加入一 ...

随机推荐

小米/红米导入VCF联系人乱码问题解决
PS:尽量不要用什么豌豆荚啊.微信啊.QQ啊之类的通讯录备份,那就等于把自己的通讯录免费送给腾讯他们了....还是自己手动的好一些,但是小白用户或者经常丢手机的卖就卖吧,总比联系人都丢了要好~~~ 默 ...
Dubbo源码学习--环境搭建及基础准备(ServiceLoader、ExtensionLoader)
环境搭建 Github上下载Dubbo最新发布版本,楼主下载版本为2.5.7. cd到源码解压目录,maven编译,命令为: mvn clean install -Dmaven.test.skip 生 ...
创建mysql快捷登录方式
1.先找到mysql的bin目录,将Mysql.exe发送快捷方式到桌面,到这里还没有完成. 2.然后右键选择属性,将目标后面添加上 -uroot -p 我的完整目标如下: D:\install\my ...
python 自动拉起进程脚本
cat /usr/local/ssdb/moniter_ssdb.py #!/usr/bin/env python import os import sys import commands #ssdb ...
Struts1.2，struts2.0原理分析
struts1原理: 1.首先我们表单提交到action 2.进入到web.xml 3.web.xml拦截*.do 4.交给ActionServlet 5.找到path属性,获得url 6.找到nam ...
最强离线安装MySQL_8.0.2方法
最强离线安装MySQL_8.0.2方法,一次就能安装成功. 按照此方式,离线安装MySQL五分钟都花不到,节省了大量的宝贵时间. 前戏,假设你已经从MySQL官网中获取了下面这个压缩包: 解压之后变成 ...
爬虫day 04(通过登录去爬虫解决django的csrf_token)
#通过登录去爬虫 #首先要有用户名和密码 import urllib.request import http.cookiejar from lxml import etree head = { 'Co ...
Docker理解
近期一直在研究Docker,感悟颇深,和大家分享一下Docker 在云计算中的应用和Docker的原理. Docker 用法https://yeasy.gitbooks.io/docker_pract ...
【微服务】之五：轻松搞定SpringCloud微服务-调用远程组件Feign
上一篇文章讲到了负载均衡在Spring Cloud体系中的体现,其实Spring Cloud是提供了多种客户端调用的组件,各个微服务都是以HTTP接口的形式暴露自身服务的,因此在调用远程服务时就必须使 ...
一个三维点类Gpoint3的实现
1 类设计基本功能 (1)默认构造时,自动初始化为(0,0,0): (2)支持点之间的加.减运算: (3)支持点与常量数据的加.减.乘除运算: (4)支持点之间的相等或不能判断 (5)如果把点类看作 ...

Js动态操作表格

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

随机推荐

热门专题