第十三篇 JS 操作table表格
JS 操作table表格
var a=1;
if(a=1){
alert('正确');
}else{
alert('错的');
}
for(i=0;i<;i++){
alert(i);
}
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JS实现控制表格样式</title>
</head>
<body>
<!--给表格一个id,JS好找到它-->
<table id="tt">
<tr>
<td>ID</td>
<td>姓名</td>
<td>性别</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>路人甲</td>
<td>男</td>
<td><a href="#">查看</a><a href="#">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>路人乙</td>
<td>女</td>
<td><a href="#">查看</a><a href="#">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>路人丙</td>
<td>男</td>
<td><a href="#">查看</a><a href="#">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>路人丁</td>
<td>女</td>
<td><a href="#">查看</a><a href="#">删除</a></td>
</tr>
</table>
<button onclick="biaoge()">添加表格效果</button>
<button onclick="bian()">添加边框</button>
<input type="button" value="第一行上色" onclick="yi()"/>
<button onclick="ziti()">字体变大</button>
<input type="button" value="加上背景颜色" onclick="yan()"/>
<script>
//我们使用文档对象找到表格的id
var tab = document.getElementById("tt");//这里我们用的是全局变量,因为它没有设在任何函数方法里 //添加表格效果
function biaoge(){ //这样的话就是一个函数方法,变量设在里面,就是局部变量
tab.style.borderCollapse="collapse"; //间距
tab.style.border="1px solid gray"; //边框
tab.style.textAlign="center"; //内容居中
tab.style.width="800px"; //宽度
}
//字体变大
function ziti(){
tab.style.fontSize="21px"; //字体大小设置
}
//添加背景颜色
function yan(){
for(i=2;i<tab.rows.length;i++){
if(i%2==0){//这里的 % 号是取膜,就是i除以2要等于0则是正确的
tab.rows[i].style.backgroundColor="yellow"; //背景色
}
else{//上面取膜不等于0,则运行这里的代码
tab.rows[i].style.backgroundColor="orange";//背景色
}
}
}
//第一行上色
function yi(){
tab.rows[1].style.backgroundColor="lightgray";//背景色
}
//给每个td添加表格
function bian(){
//这里写的是双重循环,第一个循环,找到table下的tr,第二个循环是找到tr下的td
for(i=0;i<tab.rows.length;i++){
//rows是table下的tr,length则是获取长度
for(j=0;j<4;j++){
tab.rows[i].cells[j].style.border="1px solid gray"; //边框
}
}
}
</script>
</body>
</html>
第十三篇 JS 操作table表格的更多相关文章
- js操作table表格导出数据到excel方法
js导出excel资料很少,网上也找了很多,基本都不能用,要么只能是IE用,还必须要权限,这是非常不好的.后来到github上找到table2excel.js,虽然可以用,但仍然对IE支持不够,也算不 ...
- js创建table表格
//js创建table表格var tr;var cell;for(var i=0;i<10;i++){ //创建一个tr tr=document.createElement('tr'); doc ...
- js 实现table表格拖拽和点击表头升降序排序
js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...
- 原生js封装table表格操作,获取任意行列td,任意单行单列方法
V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...
- JS获取table表格任意单元格值
jsp页面表格布局 <body onload="show()"> <center> <input type="text" valu ...
- js 操作table: insertRow(),deleteRow(),insertCell(),deleteCell()方法
表格有几行: var trCnt = table.rows.length; (table为Id ) 每行有几列:for (var i=0; i<trCnt; i++) ...
- js操作table倒叙显示序号的问题
今天遇到一奇葩问题,就是在js添加table时,序号是倒叙显示的,而且数据库查出来时正序的,为什么显示是倒叙的呢? 我百度一番,终于有了结果: var newRow=table.insertRow(- ...
- 纯JS 将table表格导出到excel
html <div > <button type="button" onclick="getXlsFromTbl('tableExcel','myDiv ...
- node.js 操作excel 表格与XML文件常用的npm
在日常工作中会经常用到把一些excel表格文件转化为json,xml,js等格式的文件,下面就是我在日常中用到的这些npm. 1.node-xlsx: node-xlsx可以把excel文件转化为上面 ...
随机推荐
- leetcode324 摆动排序II
1. 首先考虑排序后交替插入 首尾交替插入,这种方法对于有重复数字的数组不可行: class Solution { public: void wiggleSort(vector<int> ...
- JMeter4.0分布式调度压测部署
我们在Loadrunner学过使用Load Generator做肉鸡, 通过Controller来进行脚本和权重的分配来进行分布式压测, Jmeter作为当今的网红性能测试工具,这个功能必须是少不了的 ...
- springmvc+mybatis多数据源切换
前文:之前练习SSM时配置的都是单数据源,现在项目需求多数据源,所以自己查阅了以下资料,在controller中手动切换数据源成功,以下的配置细节. 实际上应该在dao层进行注解的方式切换,使用AOP ...
- AIxoder插件安装及使用
参考:https://www.aixcoder.com/#/Download 右边有快捷导航,查看对应需要的问题 1.下载AIxcoder 2.安装并注册打开 3.给IDE安装 4.验证是否安装成 ...
- Spring学习之==>AOP
一.概述 AOP(Aspect Oriented Programming)称为面向切面编程,在程序开发中主要用来解决一些系统层面上的问题,比如日志,事务,权限等等,Struts2的拦截器设计就是基于A ...
- MVC - 单点登录中间件 (转)
http://www.cnblogs.com/wangrudong003/p/6435013.html 本章将要和大家分享的是一个单点登录中间件,中间件听起来高深其实这里只是吧单点登录要用到的逻辑和处 ...
- Linux系统格式化命令mke2fs命令简析
1.mke2fs配置文件: # vim /etc/mke2fs.conf [defaults] base_features = sparse_super,filetype,resize_inode,d ...
- 不可不知的JavaScript - 闭包函数
闭包函数 什么是闭包函数? 闭包函数是一种函数的使用方式,最常见的如下: function fn1(){ function fn(){ } return fn; } 这种函数的嵌套方式就是闭包函数,这 ...
- DDoS攻击的几种类型
DDoS攻击的几种类型 随着网络攻击的简单化,如今DDoS攻击已经不止出现在大型网站中,就连很多中小型网站甚至是个人网站往往都可能面临着被DDoS攻击的的风险.或许很多站长对DDoS攻击并不是很了 ...
- input.validity
HTML5为表单提供了自带的输入规则提示 但是实际开发中,我们往往需要自定义提示消息和规则,例如限定了最大值但不要求超出时提示错误信息,这时便用到了H5提供的表单新的JS属性--validity,它是 ...