js 生成表格及其颜色

最新推荐文章于 2023-05-10 00:14:40 发布
最新推荐文章于 2023-05-10 00:14:40 发布
阅读量532 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/dxmfans/p/9434720.html
版权
<!DOCTYPE html>


<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        onload = function () {
            var list = [
            { id: '1', country: '中国', capital: '北京' },
            { id: '2', country: '美国', capital: '华盛顿' },
            { id: '3', country: '日本', capital: '东京' },
            { id: '4', country: '韩国', capital: '首尔' }
            ];


            var body = document.getElementsByTagName('body')[0];
            var table = document.createElement('table');
            table.border = '1px solid red';
            body.appendChild(table);


            var thead = document.createElement('thead');
            table.appendChild(thead);

            var item0 = list[0];
            
            for (var key in item0) {
                var tdh = document.createElement('td');
                tdh.innerHTML = key;
                thead.appendChild(tdh);
               
            }


            for (var i = 0; i < list.length; i++) {
                var tr = document.createElement('tr');
                if (i % 2 == 0) {
                    tr.style.backgroundColor = 'yellow';
                } else {
                    tr.style.backgroundColor = 'lightBlue';
                }
                table.appendChild(tr);
                var item = list[i];
                for (var key in item) {
                    var td = document.createElement('td');
                    td.innerHTML = item[key];
                    tr.appendChild(td);
                }
            }
        }
    </script>
</head>
<body>


</body>
</html>

转载于:https://www.cnblogs.com/dxmfans/p/9434720.html

weixin_30496431
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js中的dataset问题
Echo是包子脸的博客
03-29 1万+
昨天刷了IFE的任务，第十六个任务，任务详情是这样的：任务描述 参考以下示例代码，用户输入城市名称和空气质量指数后，点击“确认添加”按钮后，就会将用户的输入在进行验证后，添加到下面的表格中，新增一行进行显示 用户输入的城市名必须为中英文字符，空气质量指数必须为整数 用户输入的城市名字和空气质量指数需要进行前后去空格及空字符处理（trim） 用户输入不合规格时，需要给出提示（允许用alert，
js中使用echarts
董小礼的博客
09-23 9182
1.下载echart.js 注意：这里介绍的是纯原生js使用echarts，如果使用的是vue环境，请移步我的另一篇文章：vue-cli中使用echarts 这是官方的下载地址 https://echarts.apache.org/zh/download.html 2.在html引用 <script type="text/javascript" src="Echarts.js">&lt...
【JavaScript】Js动态生成表格&填入内容&赋予表格不同颜色
weixin_44874457的博客
03-01 631
Js动态生成表格、填入内容以及赋予表格不同颜色
python生成易于区分的颜色列表
heroacool的专栏
05-26 2603
随机数生成的颜色不容易区分，本文介绍两种，生成易于区分颜色列表的方法。 基于matplotlib from matplotlib.patches import Rectangle import matplotlib.pyplot as plt import matplotlib.colors as mcolors def plot_colortable(colors, title, sort_colors=True, emptycols=0): cell_width = 212 cel
使用python生成颜色表（color chart）
最新发布
吹吹自然风
05-10 1680
在做色彩相关的算法分析时候，经常需要使用规则的颜色表来进行辅助。下面用python（numpy和opencv）来生成颜色表并保存为图片。
js控制表格颜色
贾世鑫的博客
10-08 4069
题目：用js控制表格颜色，每三行换一次颜色 代码： 表格 1 2 3 4 5 6 7 8 9 10 window.onload=function(){ var tbl = document.getElementById("tbl"); rows = tbl.getElementsByTagName("tr"); for(i=0;i<r
js中表格隔行变色、隔列变色
qq_53787962的博客
09-13 639
隔行显色，点击哪一行哪一行显色。 隔列显色，点击哪一列哪一列显色。
前端vue用js更改表格某一行背景色方法
qq_43644046的博客
01-19 2972
前端vue用js获取列表某一行后改变背景颜色（可以用改变背景色来代替获取焦点） 找到要获取的行或者组件 寻找id属性或者class属性 虽然class属性可能设置的一样，但是可以全部获取，可以刚好后面接[i]值 data里面添加 data(){ idSearch:[], wantSearch:'', tableData: [],//你要改变的表，需要你自己的数据 num:0, } method方法里面添加 效果图 ...
JS代码实现使用canvas生成colorBar图表
jzh2004的专栏
12-09 415
最近因为工作原因，需要制作一个color bar的图表控件，网上百度了下，没有相关的源码，只能自己开发一个。使用canvas原生+JS写一个如图所示
JavaScript制作表格隔行变色效果（新浪微博中的应用）
weixin_51415327的博客
09-02 445
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..
js动态表格数据动态设置颜色
l_blackeagle的博客
12-21 7815
首先需求是这样的： 831331048160200 - 北京 超过2800w显示红色 831331048160198 - 天津 不限制 831290048160214 - 广州 超过2000w显示红色 数据是同一属性的不同id 以及不同的名称： 所以查出来的数据为一个属性下面不同的值： 比如： 球 球的号码 不同 设置几号几号为什么颜色 几号几号
DOM表格 简单购物车、表格隔行变色、表格行颜色随鼠标移动变色
Birdlun的博客
07-06 432
目录 DOM访问表格元素 常用属性和方法 rows[index]返回表格指定的行为对应属性 cells[index]返回表格指定的列所对应的属性 表格的增删改查 表格添加删除常用方法 表格行添加删除方法 列：实现购物车 列：设置表格颜色并实现隔行变色 DOM访问表格元素 常用属性和方法 caption 返回表格的标题对象 rows 返回该表格里的所有表格行 tbo...
JavaScript表格隔行变色，鼠标移入表格展示背景颜色，鼠标移出颜色还原
hyzhang6的博客
10-12 2756
作者：hyzhang 时间：2017-10-11 描述：表格隔行变色，移入移除变色 --> /*tr:hover{ color: yellow; }*/ window.onload=function(){ /* 最基本取表格数据 * */ /*var tbe1 = document.getElementById("tbe"); alert(tbe
js 控制table行的颜色
iteye_9657的博客
10-27 479
Table /** * 仿 Prototype 的 $ 方法 */ window.$ = function(id) { if(typeof id == 'string') { return document.getElementById(id); } return id; } /** * 色彩渐变 * ...
《JS控制表格奇偶数行背景色变换》
qq_35119220的博客
02-24 5688
引言： 当我们利用html标记表签语言制作出一张普通的信息表格时，为了摆脱单调，提高用户体验，我们可以为其添加各种动态效果，以满足用户在操作表格时所带来的效果乐趣。 内容概括：当鼠标移动到表格上的相关单元行时，其相关行的背景色改变【颜色自定义】，并且单元行背景色的改变会根据表格行的奇偶性来改变，从而产生背景色变换的效果。 内容截图：
table各行设置不同背景颜色的js实现
花行远的码园
12-22 6506
直接上代码var table=document.getElementById("example"); var trs=table.getElementsByTagName("tr"); alert(trs.length) for(var i=0;i<trs.length;i++){ if(i%2==0){ trs[i].style.backgroundColor="#f00";
[学习笔记]（科研作图）记录一个用于生成颜色表+颜色进制转换的网站
无
12-28 708
最近发现一个非常实用的网站，可以用来转换颜色RGB的表示方式，并且可以根据提供的两个颜色生成对应的颜色表，在科研绘图中非常使用，先看一下它的基本用法. 网址：ColorHexa 1. RGB颜色表示转换 输入任何一种颜色，该网站可以给出该颜色的详细信息，甚至有和该颜色搭配的颜色，可以说非常详细了，比如我这里输入了RGB 131 60 64，点击搜索，就可以出现这个颜色的详细信息， 以及各种进制的表示方法： 下方给出了与此颜色搭配的其他颜色： 2. 生成自定义的颜色表 有时候我们需要生成颜色表来表示
js实现表格变色点击行颜色改变
xiaodanjava的专栏
10-21 8129
 forword http://blog.csdn.net/cai7095576/article/details/21808445 js实现表格变色点击行颜色改变 [html] view plain copy print? HTML>       HEAD>       META   http-equiv="Content-Type"   co
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值