常用表格交替效果

最新推荐文章于 2021-08-03 22:57:24 发布
最新推荐文章于 2021-08-03 22:57:24 发布
阅读量360 收藏 1
点赞数
分类专栏： HTML JAVASCRIPT 文章标签： table function javascript border html 文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/octverve/article/details/1793497
版权

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script language="javascript">
window.onload = function() {
    doubleBgColor(document.getElementById("table1"),"#cccccc","#ffcccc")
 
}

function doubleBgColor(Table,Bg1,Bg2) {
    for (var i=0;i<Table.rows.length;i++) Table.rows[i].bgColor=i%2?Bg2:Bg1;
}
</script>
</head>

<body>
<table border="0" cellpadding="1" cellspacing="1" id="table1" width="500" bgcolor="#000000">
    <TR><TD>单 数行 </TD></TR>
    <TR><TD>双 数行</TD></TR>
    <TR><TD>单 数行</TD></TR>
    <TR><TD>双 数行</TD></TR>
    <TR><TD>单 数行</TD></TR>
    <TR><TD>双 数行</TD></TR>
    <TR><TD>单 数行</TD></TR>
    <TR><TD>双 数行</TD></TR>
    <TR><TD>单 数行</TD></TR>
    <TR><TD>双 数行</TD></TR>
    <TR><TD>单 数行</TD></TR>
    <TR><TD>双 数行</TD></TR>
</table>
<table><tr><td width="100" height="100" οnmοuseοver="style.backgroundColor='#C86F70'" οnmοuseοut="style.backgroundColor='#DDC676'" bgcolor="#DDC676">ihandu</td></tr></table>
</body>
</html> 

<style>
th {font-weight: normal; text-align:left; background: #CCCCCC}
td {background: #ffffff}
body{background:#000000}
</style>

<table>
<tr>
<th>Color First</th>
</tr>
<tr>
<td>Color Second</td>
</tr>
<tr>
<th>Color First</th>
</tr>
<tr>
<td>Color Second</td>
</tr>
<tr>
<th>Color First</th>
</tr>
<tr>
<td>Color Second</td>
</tr>
</table>

octverve
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html语言制作表格模板,十个最简单实用的Table设计模板
weixin_39633455的博客
05-30 3713
表格恐怕是 Web 设计中最困难的一个对象了，感谢神秘的标记语言，有太多的细节我们需要关注了，而且表格缺乏浏览器的兼容性。虽然表格只是一个简单的元素，但是它浪费了我们大量的时间。有人甚至说，标签是垃圾。其实表格本身并没有什么，是你自己使用的不当，把简单的事情弄的复杂了。这就是我写下本篇文章的原因，它将向你展示十个最简单表格设计方法。准备想必大家都知道 xhtml 1.0 strict 标准，下面是...
表格的几种css样式效果
07-26
4. **条纹效果**：为交替行添加不同的背景色，可以创建条纹效果。可以使用`:nth-child()`选择器，如`tr:nth-child(even) { background-color: #F2F2F2; }`。 5. **表头样式**：`th`元素默认有较粗的字体和居中对齐...
android绚丽的ListView表格效果的实现
Happy learning
03-09 431
  简介： 　　在业务系统中经常会用到表格控件去显示数据，但Android自带的ListView控件本身无法实现一种较为美观的表格效果，但我们可以通过其他的方式让ListView表格变得更漂亮。让我们一起来探讨下。 　　我们先来看看以下两幅图： 　　图（一） 　　图（二） 　　很明显，图一比较简洁，而图二看上去明亮耀眼。从用户体验的角度来讲，图二界面效果明显比图一好，那边框是...
使用Javascript为表格添加斑马线效果
weixin_44178482的博客
12-19 2271
首先，我们需要先利用table标签创建一个表格。 &lt;table&gt; &lt;caption&gt;Itinerary&lt;/caption&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;When&lt;/th&gt; &lt;th&gt;Where&lt;/th&
js设置表格奇偶行的不同颜色，实现斑马效果
HuangsTing的博客
10-30 2728
让表格里的行更具有可读性的常用技巧是交替改变它们的样式背景，从而形成斑马线效果，使相邻的两行泾渭分明。通过分别设置奇数行和偶数行样式的办法可实现这种效果。如果浏览器支持CSS3，那么只需要如下两行样式： tr:nth-child(odd){background-color:#ffc;} tr:nth-child(even){background-color:#fff;} 另一种方法，可以编写一个...
html表格行内编辑器,表格编辑制作软件——TableEdit
weixin_30938397的博客
06-10 876
原标题：表格编辑制作软件——TableEditTableEdit for mac是专门设计了一个简单，干净，优雅的电子表格应用程序为OS X TableEdit设有简约而直观的界面，TableEdit for mac并具有方便的功能，如功能和无缝CSV导入/导出，以及详尽的单元格样式选项。TableEdit for mac软件资源分享：https://www.macdown.com/mac/437...
html表格为正方形,初学前端之实现页面简单的边框、表格和三角形
weixin_29014939的博客
05-31 603
本文用css的简单样式来实现边框、表格和三角形的页面展示，包括一些常用写法的学习。边框的设置我们先举例实现，再深入探究其中的写法。例子.png1 . 先总览全局需要哪些html的标签：需要哪些css的样式：边框的设置，其中有颜色、四周边框的显示和隐藏、背景颜色。元素的居中设置文字和边框的距离设置2 .写出html因为元素相对少，且不复杂，直接在html的body里面用div把内容包裹起来。然后di...
绚丽的ListView表格效果的实现
yuxiaohui78的专栏
12-09 2299
简介： 　　在业务系统中经常会用到表格控件去显示数据，但Android自带的ListView控件本身无法实现一种较为美观的表格效果，但我们可以通过其他的方式让ListView表格变得更漂亮。让我们一起来探讨下。 　　我们先来看看以下两幅图： 　　图（一） 　　图（二） 　　很明显，图一比较简洁，而图二看上去明亮耀眼。从用户体验的角度来讲，图二界面效果明
用CSS控制表格的交替颜色
wenling0629的专栏
04-02 388
td {font-size:12px;color:#333333;line-height:150%} tr {background-color:expression((this.sectionRowIndex%2==0)?"#ffffff":"#f4f4f4")}             [http://www.poluoluo.com/lanren/code/" target
表格应用css样式,对表格与表单应用CSS样式.ppt
weixin_31925811的博客
08-03 133
《对表格与表单应用CSS样式.ppt》由会员分享，可在线阅读，更多相关《对表格与表单应用CSS样式.ppt(12页珍藏版)》请在人人文库网上搜索。1、第十章,HTML与CSS前台页面设计,对表格与表单应用CSS样式, http:/www.ort- http:/www.zg- http:/www.skf- http:/www.nsk- http:/www.fag- http:/www.ntn- ht...
JQuery对表格进行操作的常用技巧总结
12-03
本文将详细讲解在jQuery中对表格进行操作的常用技巧。 1. **表格奇数行和偶数行添加样式** 这个技巧通常用于创建交替行颜色的效果，提高用户阅读体验。首先，我们可以选择所有的表格行（`tr`）并根据它们的索引来...
javascript 表格排序和表头浮动效果(扩展SortTable)
10-30
**表格排序**是网页中常用的一种交互功能，它允许用户通过点击表头来根据某一列的数据进行升序或降序排列。在JavaScript中，实现这一功能可以借助于各种库，其中一个便是由Stuart Langridge编写的SortTable。...
漂亮大气的表格样式
12-17
5. **响应式设计**：使用媒体查询(`@media`)确保表格在不同设备和屏幕尺寸上都有良好的显示效果。 ```css @media (max-width: 600px) { table, th, td { display: block; } } ``` 6. **排序和过滤**：虽然...
Bootstrap CSS布局之表格
08-31
Bootstrap CSS布局中的表格是网页设计中常用的一种展示数据的方式，它提供了一套美观且功能丰富的样式，使得在不同设备上展示表格数据变得更加便捷和统一。Bootstrap框架为表格提供了多种预定义样式，帮助开发者快速...
如何判断一个网络路径是不是有效路径
09-25 901
如何判断一个网络路径是不是有效路径 private int GetUrlError(string curl){      int num = 200;      if (this.method == 1)      {          HttpWebRequest request = (HttpWebReq
Rainer’s DHTML Library 2.0　　学习ＣＳＳ的好助手
09-18 818
Rainer’s DHTML Library 2.0　　学习ＣＳＳ的好助手 
无懈可击的CSS圆角技术
09-16 691
要一个宽度不固定的框，事情变得有些复杂了。宽度不固定，就意味着这个框在水平和垂直方向都有足够灵活的变化。　　为什么说这更难一些呢？因为它需要对四张图片的合适安置——每个圆角用一张。每个圆角都要独立出来，以便框能够在各个方向伸展。于是，四张图片就意味着需要四个HTML对象来作为背景图片的载体。　　有一些实现办法包括在样式表中使用“生成内容”，即使用：before和:after伪类来为单独的一个对象加
html页面内容分页
09-17 612
      上网看新闻或是资料时，经常看到有些文章内容分页。非常好奇其实现方法。今天在网上淘到一个非常棒的用javasript给页面内容分页的例子。看下效果吧   ：下面是代码，大家可以研究一些，非常不错的javascript代码：  1DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  2html>  3head> 
uniapp 字幕横竖交替翻转效果
最新发布
06-20
在 UniApp 中实现字幕横竖交替翻转的效果，你可以使用 Vue.js 的动画和 CSS3 的变换属性来实现。以下是一个简单的步骤说明： 1. 首先，确保你的字幕是用 Vue 组件渲染的，比如一个 `v-for` 循环遍历字幕列表。 2. 创建一个 CSS 类，例如 `.flip-text`，用于定义字幕的样式和动画： ```css .flip-text { position: absolute; transform-origin: center bottom; transition: transform 0.5s ease; } .flip-text.vertical { transform: rotateY(180deg); } .flip-text.horizontal { transform: rotateX(180deg); } ``` 3. 在 Vue 组件中，为每个字幕创建一个切换横竖状态的方法，例如 `toggleFlipAxis`，并绑定到一个触发事件（比如点击）： ```html <template> <div> <span v-for="subtitle in subtitles" :key="subtitle.id" :class="{ flipText: isFlipped(subtitle) }"> {{ subtitle.text }} <button @click="toggleFlipAxis(subtitle)">Flip</button> </span> </div> </template> <script> export default { data() { return { subtitles: [ // ... ], }; }, methods: { toggleFlipAxis(subtitle) { const currentAxis = subtitle.isHorizontal ? 'horizontal' : 'vertical'; subtitle.isHorizontal = !subtitle.isHorizontal; // 倒换横竖状态 this.$refs[`subtitle-${subtitle.id}`].classList.toggle(currentAxis); }, isFlipped(subtitle) { return subtitle.isHorizontal; }, }, }; </script> ``` 4. 在模板中，为每个字幕添加一个唯一的引用，这样 Vue 可以在 JavaScript 中找到对应的元素： ```html <span ref="subtitle-{{ subtitle.id }}">{{ subtitle.text }}</span> ``` 现在，点击每个字幕，它会在横竖方向之间交替翻转。记得根据实际需求调整动画时间和方向切换逻辑。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值