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

随机推荐

whonix官网部分翻译
Whonix:一个高安全的方式来Surfing the Internet Whonix是一个桌面操作系统,被设计用于高级安全和隐私.It realistically addresses attacks ...
WebSocket小插件
一.WebSocket小介绍随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了.近年来,随着HTML5的诞生,WebSocket协议被提出,它实现了浏览器与服务器的全双工通信 ...
堆排序HeapSort
堆排序,顾名思义,是采用数据结构堆来进行排序的一种排序算法. 研究没有规律的堆,没有任何意义.特殊的堆有最大堆(父节点值大于等于左右字节点值),最小堆(父节点值小于等于子节点值).一般采用最大堆来进行 ...
mongoose返回值无法修改
mongoose 查询方法 find 例:db.collections.find(query,function(err,doc) { 如果var res = doc[0] 是{name:'feife ...
如何基于 eolinker 的进行接口管理
由于工作的原因,经常要接触到很多API接口,而API接口在设计时往往需要编写大量的文档,而且编写完成后往往需要根据实际情况,经常改动文档,这使得文档编写维护工作量相对较大,这让我也包括很多的开发者都很 ...
关于apidoc文档生成不了的一个原因
前几天在写完API后,写注释文档,然后很习惯的去用apidoc取生成注释文档,但是奇怪的事发生了,没有注释的内容,也没有报错:注释代码如下: /* * @api {get} /applet/:id 根 ...
php的定界符<<<eof的问题
在php的编程过程中难免会遇到输出大段的html和javascript脚本的情况,可都放在具体的地方的时候,路由不好处理,而且比较浪费时间如果按照传统的输出方法,按照字符串输出的话,需要大量的转义字 ...
【二十二】mysqli事务处理
事务处理事务基本原理如果不开启事务,执行一条sql,马上会持久化数据.可见:默认的mysql对sql语句的执行是自动提交的! 如果开启了事务,就是关闭了自动提交的功能,改成了commit执行自动提 ...
Filter、Listener 学习总结
今天我们来介绍 Filter.Listener 这两个模块一些简单的知识和应用,接下来我们开始我们的正题 ! 1. Filter(过滤器) 1.1 对 Servlet 容器调用 Servlet 的过程 ...
FreeRTOS--疑难解答
此章节涉及新手最常遇见的3种问题: 错误的中断优先级设置栈溢出不恰当的使用printf() 使用configASSERT()能够显著地提高生产效率,它能够捕获.识别多种类型的错误.强烈建议在开发或 ...

Js动态操作表格

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

随机推荐

热门专题