动态表格

动态表格彻底研究

对表格单元格的添加删除修改并对其进行移动以及拷贝等操作，是目前应用开发中常用的技术

1 1 1 1
2 2 2 2
3 3 3 3
4 4 4 4
5 55 5
6 6 6 56
777 7 77 7
88 8 88 77
999 99 99 999
10 10 10 10 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>动态表格</title>
</head>
<body>
<p>动态表格彻底研究</p>
<p>对表格单元格的添加删除修改并对其进行移动以及拷贝等操作，是目前应用开发中常用的技术</p><p><input type="button" name="Submit" value="刷新" onclick="onRefresh()" /><input type="button" name="Submit2" value="全选"  onclick="selectall()"/><input type="button" name="Submit8" value="反选" onclick="inverse()" /><input type="button" name="Submit3" value="不选" onclick="noselect()"/><input type="button" name="Submit4" value="添加行与列" onclick="insert_row()" /><input type="button" name="Submit7" value="删除选择" onclick="delRow()" /><input type="button" name="Submit5" value="拷贝选择" onclick="copyRow()"/><input type="button" name="Submit92" value="居中对齐"  onclick="tableAlign()"/><input type="button" name="Submit922" value="隔行变色"  onclick="changeColor()"/>
</p>
<table width="50%" border="1" cellpadding="1" cellspacing="2" bordercolor="#CCCCCC" id="myTable"><tr><td width="7%"><label><input type="checkbox" name="checkbox" value="checkbox" /></label>    </td><td width="51%">1</td><td width="14%">1</td><td width="14%">1</td><td width="14%">1</td></tr><tr><td><input type="checkbox" name="checkbox2" value="checkbox" /></td><td>2</td><td>2</td><td>2</td><td>2</td></tr><tr><td><input type="checkbox" name="checkbox3" value="checkbox" /></td><td>3</td><td>3</td><td>3</td><td>3</td></tr><tr><td><input type="checkbox" name="checkbox4" value="checkbox" /></td><td>4</td><td>4</td><td>4</td><td>4</td></tr><tr><td><input type="checkbox" name="checkbox5" value="checkbox" /></td><td>5</td><td colspan="2">55</td><td>5</td></tr><tr><td><input type="checkbox" name="checkbox6" value="checkbox" /></td><td>6</td><td>6</td><td>6</td><td>56</td></tr><tr><td><input type="checkbox" name="checkbox7" value="checkbox" /></td><td>777</td><td>7</td><td>77</td><td>7</td></tr><tr><td><input type="checkbox" name="checkbox8" value="checkbox" /></td><td>88</td><td>8</td><td>88</td><td>77</td></tr><tr><td><input type="checkbox" name="checkbox9" value="checkbox" /></td><td>999</td><td>99</td><td>99</td><td>999</td></tr><tr><td><input type="checkbox" name="checkbox10" value="checkbox" /></td><td>10</td><td>10</td><td>10</td><td>10</td></tr>
</table>
<br />
<p></p>
<script type="text/javascript">var form = document.forms["form1"];var table = document.getElementById("myTable");var selectBox = table.getElementsByTagName("input");var tr = table.getElementsByTagName("tr");var clicked = true;function insert_row(){//alert(table.rows[0].cells.length)
var thisrow = table.insertRow(0);var thiscell = thisrow.insertCell(0);thiscell.innerHTML = "<input type=\"checkbox\" name=\"checkbox10\" value=\"checkbox\" />";var thiscell1 = thisrow.insertCell(1);thiscell1.innerHTML = "cell";var thiscell2 = thisrow.insertCell(2);thiscell2.innerHTML = "cell";var thiscell3 = thisrow.insertCell(3);thiscell3.innerHTML = "cell";var thiscell4 = thisrow.insertCell(4);thiscell4.innerHTML = "cell";thiscell4.align = "center";}function insert_Cell(){var y = table.rows[0].insertCell(0);y.colSpan="2";y.innerHTML = "sssss";}function selectall(){for(i=0;i<selectBox.length;i++){selectBox[i].checked = true;}}function noselect(){for(i=0;i<selectBox.length;i++){selectBox[i].checked = false;}}function inverse(){for(i=0;i<selectBox.length;i++){if(selectBox[i].checked){selectBox[i].checked = false;}else{selectBox[i].checked = true;}}}function delRow(){for(i=selectBox.length-1;i>=0;i--){//alert(typeof(selectBox[i]));
if(selectBox[i].checked){table.deleteRow(i);}}}function onRefresh(){location.reload();}function copyRow(){for(i=0;i<selectBox.length;i++){if(selectBox[i].checked){//var copytable = document.getElementById("copyTable");
var tablerow = table.insertRow(table.rows.length);tablerow.innerHTML = table.rows[i].innerHTML;}}}function tableAlign(){for(i=0;i<selectBox.length;i++){if(selectBox[i].checked && clicked){table.rows[i].align = "center";}}}function changeColor(){var skip = true;for(i=0;i<tr.length;i++){                if(skip){tr[i].bgColor = "#cccccc";skip = false;}else{tr[i].bgColor = "#ffffff";skip = true;}}}</script>
</body>
</html>

Js操作表格-对表格单元格的添加删除修改相关推荐

  1. html 鼠标单击单元格,vue-easytable点击表格中某个单元格操作

    一:vue-easytable的地址 http://doc.huangsw.com/vue-easytable/app.html#/table/hideTable 二:改变当前鼠标悬浮单元格的样式 1 ...

  2. 自动化办公之excel教程（3）：数据编辑操作，表格的美化操作，应用表格样式和单元格样式，制作报销汇总单

    一.数据编辑操作 1.填充数据 填充数据见上一节 自动化办公之EXCEL教程(2):各种数据的输入,自动填充数据,表格操作小技巧 2.查找和替换数据 第一步:开始选项卡里找到查找 或者Ctil+F 第 ...

  3. html如何取单元格内容,JS获取表格内指定单元格html内容的方法

    JS获取表格内指定单元格html内容的方法 本文实例讲述了JS获取表格内指定单元格html内容的方法.分享给大家供大家参考.具体如下: 下面的代码先通过表格对象的rows获得指定的行的所有单元格数组, ...

  4. 如何通过VB合并Excel单元格以及设置Excel行高？VB创建Excel表格，合并单元格，生成图形等操作

    如何通过VB合并Excel单元格以及设置Excel行高? 例如:我想把第一列的第4,5,6,7行合并...我在怎样让合并单元格里的字居中,怎样改变字体. 请不吝赐教... ============== ...

  5. Python 操作 excel 插入图片、表格、设置单元格颜色、字体（三）

    Python 操作 excel 插入图片.表格.设置单元格颜色.字体 python 操作 excel 插入图片.表格.设置单元格颜色.字体 提示:以下是本篇文章正文内容,下面案例可供参考 一.open ...

  6. layui table 表头合并_layui 动态表格之合并单元格

    需求: 下面用excel表格大概模拟下需求,左边是原来的,要改成右边这样的: ①第一步:再生成表格后调用此方法,以合并重复的单元格 done : function(res, curr, count) ...

  7. 怎么wps解除合并单元格_wps表格怎么锁定单元格

    wps表格怎么锁定单元格呢?很多用户对此还不是很清楚,小编这里就给大家带来有关wps表格怎么锁定单元格的回答,希望能够对大家有所帮助. 一.整个表格进行锁定 1.同时按住Ctrl+A,选中整个单元格, ...

  8. python如何对excel两个单元格求乘积_excel表格怎么求乘积_excel表格多个单元格怎么求积...

    excel是我们日常生活中常用的办公软件之一,经常拿来统计和运算.下面让学习啦小编为你带来excel表格多个单元格求积的方法. excel求积步骤如下: Excel中多个单元格相乘的乘法公式. 在E1 ...

  9. 计算机基础知识教程excel单元格拆分,电脑内怎么将excel表格中某个单元格的内容拆分至不同单元格里...

    电脑内怎么将excel表格中某个单元格的内容拆分至不同单元格里 当我们在使用电脑的时候,可以下载excel软件来处理数据文件,那么如果想要将一个单元格中的内容拆分到不同的单元格中的话,应如何操作呢?接 ...

最新文章

  1. java接口匿名内部类_JAVA技术分享：接口，内部类，匿名内部类
  2. Duanxx的图像处理学习： 透视变换(一)
  3. ctf xor题_从一道CTF题目谈PHP中的命令执行
  4. Eclipse 搭建Android开发环境(整理)
  5. java基础(1)-几种获取类的扩展方式
  6. 米的建站日记(2014年12月15日)
  7. head first java原文_Head First Java
  8. 在计算机软件中 CUI的中文意思是,长江大学 计算机基础11-12上A卷cui
  9. Linux 下的终端
  10. CAN数据格式-ASC
  11. adams怎么打开自带模型_科研仿真之Adams入门篇
  12. 利用场景法设计atm自动取款机的测试用例_黑盒测试之场景法
  13. 凤凰os进不去图形界面_凤凰os启动不了
  14. 唐平中讲座笔记 Reinforcement mechanism design 20171107
  15. 以贝叶斯思维看待世界
  16. 如何将电脑（网线）网络共享给iPhone苹果手机（不需要数据线）
  17. 社交礼仪之握手礼仪（转）
  18. 算法概念：大O表示法/小o表示法/Ω/Θ
  19. 深度学习入门 ---稀疏自编码器
  20. NRF51822 2.4G无线

热门文章

  1. 【Android 逆向】ART 脱壳 ( dex2oat 脱壳 | aosp 中搜索 dex2oat 源码 | dex2oat.cc#main 主函数源码 )
  2. 【Android 插件化】Hook 插件化框架 ( Hook Activity 启动流程 | Hook 点分析 )
  3. 【计算理论】计算复杂性 ( 非确定性图灵机的时间复杂度 | 非确定性图灵机 与 确定性图灵机 的时间复杂度 之间的关系 )
  4. 【Android RTMP】Android Studio 集成 x264 开源库 ( Ubuntu 交叉编译 | Android Studio 导入函数库 )
  5. .net core mvc 区域路由设置（配置）
  6. PHP封装返回Ajax字符串和JSON数组
  7. 网页瀑布流效果实现的几种方式
  8. Quartz定时任务学习（九）Quartz监听器
  9. easyui 初体验
  10. 黑马Java学习笔记之-----单例模式