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;
}
JS
//全选事件
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博客一直打不开,就在博客园完毕了今天的记录,结果临关机,登录了下.发现又好了,就再多花个几分钟转下吧,也无论到底在意的是什么了,权当强迫症了... 前几天记录了动态的加入一 ...
随机推荐
- 在微信端使用video标签,播放结束会出现QQ浏览器推荐视频的解决办法(vue)
会出现播放结束显示QQ浏览器推荐视频的原因:(我是vue的项目,而且我是新手,只是单纯的给大家分享一个方法,代码比较low请自动忽略) 因为在x5(QQ浏览器)内核中,把video标签劫持了,只要是检 ...
- python+selenium安装
1.下载Python 请到官网自行下载安装https://www.python.org/downloads/ 在安装的时候,注意一定要勾上这个选项,可以免去我们配置系统变量的麻烦,如果你忘了,没关系, ...
- Anaconda快捷搭建Python2和Python3环境
我们在使用Pycharm编辑Python程序经常会因为不熟悉Python2和Python3的一些代码区别而导致错误,我们知道他们之间很多代码是必须运行在对应版本中的,否则是会报错的.因此,本文介绍一个 ...
- jinja2模板常用方法
数学运算+,-,*,/,**,//,%等数学运算符都支持. 逻辑运算and,or,not也同样支持 1.in判断元素是否在集合中 2.|管道操作符,默认使用Apply调用一个方法 3.~字符串连接 4 ...
- insert时报Cannot add or update a child row: a foreign key constraint fails (`yanchangzichan`.`productstatusrecord`, CONSTRAINT `p_cu` FOREIGN KEY (`cid`) REFERENCES `customer` (`cid`))错误
mybatis在insert时报Cannot add or update a child row: a foreign key constraint fails (`yanchangzichan`.` ...
- MVC-1(javabean+jsp+servlet+jdbc)
这是一篇最初版本的mvc设计模式的demo.路要一步一步走,弄明白这其中的逻辑,对后面掌握ssh,ssm等框架大有裨益. 计算机系的同学们也要为毕设做准备了,希望可以帮你们迈出自己做毕设的第一步(微笑 ...
- NodeMCU Builder, yet another NodeMCU IDE
最近几天研究基于NodeMCU的Wi-Fi小车,突然之间想要写一个专门开发NodeMCU Lua代码的工具自己用,由于官方已经有了NodeMCU Studio,所以我的就叫NodeMCU Builde ...
- Chrome 浏览器报 filed to load resource:net err cache read failure 错误:
在IE/FF下没有该错误提示,但在Chrome下命令行出现如下错误信息: Failed to load resource: net::ERR_CACHE_MISS 该问题是Chrome浏览器开发工具的 ...
- 解决微信公众平台IP白名单
微信公众平台,作为自媒体的旗舰级产品,越来越多的人已经投入它的怀抱.正如它的广告词所说:再小的个体,也有品牌 好吧,闲话不多说,今天要说的是它的IP白名单机制. 我们现在安装的大部分的电信的家庭级别的 ...
- 关于Unity里动态加载图片
Resources.Load 使用该方法可以动态加载资源 过程: 1.首先需要在Project面板里创建一个名为Resources的文件夹(名字必须是这个 不能写错啊) 2.把要加载的游戏对象放到该目 ...