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

随机推荐

Java 核心内容相关面试题【1】
1.什么是 transient 变量? transient 变量是指不会被序列化的变量. 2.什么是同步(synchronization)? 在多线程环境中,同步是指控制多个线程访问共享资源的方式.没 ...
C#去掉字符串头尾指定字符
private void button2_Click(object sender, EventArgs e) {//去掉字符串头尾指定字符 string MyInf ...
Python——网络爬虫
此篇文章继续跟着小甲鱼的视频来初学网络爬虫,除了小甲鱼的网站上可下载视频,发现b站上也有全套的视频哦,会比下载来的更方便些. 网络爬虫,又称为网页蜘蛛(WebSpider),非常形象的一个名字.如果你 ...
Docker Register安装与基本认证
准备基本事项 Docker环境登录授权方式镜像存放地址 HTTPS外网访问启动Docker Registry 1. 基本事项本篇涉及到的数据文件都放在/data目录下, 其中会有三个子目录 ...
如何开发一个chrome扩展
chrome是一个不错的浏览器,web开发者工作中一般都会使用chrome做为默认浏览器,它有很多扩展,给浏览器补充了各种功能,增强了用户体验.chrome具体能干什么?怎么做出来的呢? chrome ...
Java多线程学习之ThreadLocal源码分析
0.概述 ThreadLocal,即线程本地变量,是一个以ThreadLocal对象为键.任意对象为值的存储结构.它可以将变量绑定到特定的线程上,使每个线程都拥有改变量的一个拷贝,各线程相同变量间互不 ...
Android 之旅开始了！先自我了解下Android与Linux之间的关系
Android是在Linux2.6的内核基础之上运行的,提供核心系统服务:安全.内存管理.进程管理.网络组.驱动模型.内核部分还相当于一个介于硬件层和系统中其他软件组之间的一个抽象层次.但是严格来说它 ...
Qt----拖拽
最近比较忙,今天此才有时间来继续学习下Qt.Qt的拖拽可以按字面意思分为拖和拽两部分.一般来说我们常见的拖拽分别由两个程序合作完成.例如我们经常把桌面的文件拖拽进其他目录: 这个拖拽在Qt中由两方合作 ...
HTML5原生拖拽/拖放⎡Drag & Drop⎦详解
前言拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
JAVASE 循环之计算各位上数字的和
问题:输入一个整数,计算它各位上数字的和 Scanner sc = new Scanner(System.in); int a = sc.nextInt(); int sum = 0; while(a ...

Js动态操作表格

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

随机推荐

热门专题