使用js将表格奇数设置红色

2024-11-05

设计table表格，用js设计偶数行和奇数行显示不同的颜色

第一种:鼠标经过时table表格中的颜色根据奇偶行改变不同的颜色 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function changeOver(elementId){ //声明指定相关表元素 var table1 = do

1.用js创建表格 <script> function createTable(){ //创建表格 //创建对象 //window下面的属性方法可以把window去掉或者写上 var table = window.document.createElement("table"); for(var i=0;i<4;i++){ var tr = document.createElement("tr"); var td = document.createE

JS中表格的全选和删除要注意的问题

在项目开发中,由于刚刚开始做项目,我对js还不是很精通,所以在用js对表格的全选和删除中遇到了不少问题,后来通过查找资料解决了,之后总结了一下关于js表格的全选和删除出现的一些问题,希望能帮助到大家. 以下是我自己做的一个小例子,用来更简单明了的说明js全选和删除. 一.全选的说明:当选中全选的checkbox时,下面1-5都会选中,没有选中时1-5都不会选中,这个实现不难,步骤如下: 1.获取全选框的选中状态, 2.for循环设置所有的单选框的选中状态主要代码: //1.获取全选按钮 var

JS对表格排序(支持对序号，数字，字母，日期)

JS对表格排序(支持对序号,数字,字母,日期) 前不久看到淘宝组件有"对表格排序的插件" 如想要看可以看这个地址 http://gallery.kissyui.com/KSortTable/1.0/demo/index.html 但是看了下他们的JS源码有点复杂所以自己试着写了一个简单点的,同样也能实现相应的功能,且相对于他们来讲多添加了一个"按日期排序的功能" , 目前对日期的格式支持两种格式:一种是2013/12/29 另外一种是:2013-12-29

Django前端HTML通过JS实现表格可编辑，动态添加行，回车完成新建文件夹

功能描述: 点击“新建文件夹”按钮,在table的末尾增加一行:单击页面的新增行,使单元格td变成可编辑状态:输入内容后,当单元格失去焦点时,保存输入的内容:回车后通过AJAX提交后台完成新建文件夹. HTML部分代码,id="table2"和EditType="TextBox"后面需要用到. <button class="btn btn-default" type="button" id="create_di

JS读写Cookie（设置、读取、删除）

JS读写Cookie(设置.读取.删除) Cookie是客户端存放数据的一种方式,可用来做状态保持. 1.设置Cookie: a.无过期时间:(若不设置过期时间,默认为会话级Cookie,浏览器关闭就会失效) function setCookie(name,value) { document.cookie = name + '=' + escape(value); } b.固定过期时间: function setCookie(name,value) { var Days = 30; var ex

datagrid-detailview.js easyui表格嵌套

案例学习总结：原生JS实现表格排序

最近在学习js的表格排序,没想到看不起眼的表格排序实际上却暗含了众多JS知识点.在这里记录一下此次学习过程.希望对大家也有所帮助. 完整的表格排序涉及了下列这些知识点: call方法使用 sort方法深入数据绑定 DOM映射下面详细的总结一下这些知识点,最后结合这些知识点实现下面这样一个表格排序案例. 完整的案例源码:https://github.com/daweihe/JSProjects 一.知识点总结 1.call方法使用 call方法的作用是改变方法中的this指向. call这个方

统计js数组中奇数元素的个数

如何统计一个JS数组中奇数元素的个数呢? 这是群友提出的一个问题,大部分群友给出的是遍历然后对2取模,得到最终结果. 这样的写法是最容易想得到的,那么有没有其他思路呢? 这里我提供另外一种思路,我们知道奇数其实就是以 1 3 5 7 9 作为末尾结尾的数字,那么只要统计这些数字出现的次数就够了,但是光这样统计容易误算,所以我们可以先用逗号拼接起来,连着逗号一起计算,由于js没有php那么方便的能用substr_count 函数统计字符串出现次数,所以我们直接采用正则替换,计算长度差得到个数,代

[Xcode 实际操作]五、使用表格-(3)设置UITableView单元格图标

目录:[Swift]Xcode实际操作本文将演示如何给表格行设置图标. 打开资源文件夹[Assets.xcassets], 在资源文件夹中导入两张图片:一张彩色,一张灰色,作为单元格的图标. [+]->[Import]->[Open] 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首先添加两个协议. //一个是表格视图的代理协议UITableViewDelegate //另一个是表格视图的数据源协议UITableViewDa

Excel2010表格里设置每页打印时都有表头

在打印Excel表格时常常会出现如果存在多页打印时,往往从第二页开始就会出现没有表头的情况,导致到后面都不清楚对应的是哪个数据,查看时也很麻烦,下面就将为大家介绍如何在Excel表格里设置每页打印时都有表头 1. 首先打开所要修改的Excel表格 2. 我们首先来看看第一页与第二页的区别 3. 打开菜单栏里面的“页面布局”选项卡 4. 点击页面设置板块中的“打印标题” 5. 在打印标题内有顶端标题行与左端标题行,选中顶端标题行,点击右边的小箭头 6. 点击小箭头后会弹出一个启动框,此时选中第一页

（转）用JS实现表格中隔行显示不同颜色

用JS实现表格中隔行显示不同颜色第一种: <style> tr{bgColor:expression( this.bgColor=((this.rowIndex)%2==0 )? 'white' : 'yellow'); } </style> <table id="oTable" width="100" border="1" style="border-collapse:collapse;&quo

css3-6 表格如何设置样式和定位样式是什么

css3-6 表格如何设置样式和定位样式是什么一.总结一句话总结:css可以解决所有属性设置的样式. 1.表格如何设置样式? css样式可以解决一切问题,没必要在表格上面加属性来设置样式. 7 table{ 8 width:1000px; 9 border:2px solid #00f; 10 border-collapse:collapse; 11 } 12 13 td,th{ 14 text-align:center; 15 border:2px solid #00f; 16 } 2.绝

js实现表格配对小游戏

js实现表格配对小游戏一.总结一句话总结: 二.js实现表格配对 1.配对游戏案例说明实例描述: 当用户点击两个相同的图案或字符后配对成功,全部配对成功后游戏获胜案例008采用了大家常见的小游戏来帮助大家提高应用JS解决实际问题的能力,需要说明的是该案例在很大程度上做了简化,大家课下练习的时候可以发挥自己的想象力进一步来完善该游戏 2.截图 3.代码 <!DOCTYPE html> <html lang="en"> <head> <me

element ui的表格列设置fixed后做动态表格出现表格错乱

最近使用element-UI时,使用table做动态表格,当操作列使用fixed时,动态切换表格列设置设置时就会出现错乱,情况如下: 解决方法: 把el-table-column上的key设成一个随机数Math.random(),每次表头设置完都要更新一下就正常,如下这样,显示结果就正常了

js 父子标签同时设置onclick，子标签触发父标签onclick解决办法

js 父子标签同时设置onclick,子标签触发父标签onclick 或子标签为a 先触发onclick 再触发 a 的 href: 解决方案:在子标签的onclick里写 var ev = window.event || arguments.callee.caller.arguments[0]; if (window.event) ev.cancelBubble = true; else { ev.stopPropagation(); }

原生js实现文件下载并设置请求头header

原生js实现文件下载并设置请求头header const token="自行定义";//如果有 /** * 向指定路径发送下载请求 * @param{String} url 请求路径 */ function downLoadByUrl(url){ var xhr = new XMLHttpRequest(); //GET请求,请求路径url,async(是否异步) xhr.open('GET', url, true); //设置请求头参数的方式,如果没有可忽略此行代码 // xhr.s

基于Vue.js的表格分页组件

有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋可以移步我的上一篇文章<浅谈Vue.js>了解一下. BootPage组件简介其实也不是啥高大上的组件了,相反确实一个简单的表格分页组件而已,主要是自己最近项目中需要一个表格分页组件,而Vue官方组件库里分页组件都功能太强大或者没有适合我的,所以就自己写了一个凑合着用,或许有人和我一样需要这样一

Vue.js的表格分页组件

转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋可以移步我的上一篇文章<浅谈Vue.js>了解一下. BootPage组件简介其实也不是啥高大上的组件了,相反确实一个简单的表格分页组件而已,主要是自己最近项目中需要一个表格分页组件,而Vue官方组件

js实现表格信息的删除和添加

制作一个表格,显示班级的学生信息. 要求: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3. 点击删除按钮,则删除当前行第一步: 首先,我们创建删除函数,并在删除按钮上添加点击事件: 提示: 使用removeChild(). 第二步: 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点: 提示: 使用createElement().innerHTML.appendChild(). 第三步:

关于element-ui表格样式设置的方法cell-class-name

关于element-ui表格使用的一些方法最近在用Vue.js和elment-ui做一个后台管理项目,不得不说element功能非常强大,提供了许多组件,基本可以满足一些基础的开发了.因为我做的后台系统,里面表格用到比较多,但是其实我也只是一个刚入行不久的菜鸟,只看官方文档,开发起来还是有难度.不过经过不停的测试以及查阅资料,还是勉强实现了效果,这里就把一些方法分享出来,希望对初学者有一些帮助吧. 如下图,element表格是自带了一些样式的但是有时候我们要自己设置一些样式怎么办呢?官网的样