table隔行变色

最新推荐文章于 2022-12-19 20:15:26 发布
最新推荐文章于 2022-12-19 20:15:26 发布
阅读量264 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012325112/article/details/49623435
版权
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'b.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
<style type="text/css">
    
    .QQQ{background-color: }
</style>
 
  <script type="text/javascript" src="js/jquery-1.3.1.js"></script>

<script type="text/javascript">
    
    jQuery(document).ready(function(){
        // $("#tbId01 tbody tr:even").css("backgroundColor","#888")
        var items=document.getElementsByTagName("tr");
        for (var i = items.length - 1; i >= 0; i--) {
            if(i%2==0){
                alert(items[i]);
                // console.log(items[i])
                items[i].style.backgroundColor="#888";
            }
        };
    })
</script>
</head>
  <body>
  <table id="tbId01">
      <caption>table title and/or explanatory text</caption>
      <thead>
          <tr>
              <th>header</th>
          </tr>
      </thead>
      <tbody>
          <tr>
              <td>111111111111111111</td>
              <td colspan="" rowspan="" headers="">2222222222222222222222222</td>
          </tr>
          <tr>
              <td colspan="" rowspan="" headers="">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
              <td colspan="" rowspan="" headers="">bbbbbbbbbbbbbbbbbbbb</td>
          </tr>
          <tr>
              <td colspan="" rowspan="" headers="">我爱你我爱你我爱你我爱你</td>
              <td colspan="" rowspan="" headers="">算你狠算你狠算你狠算你狠算你狠</td>
          </tr>
          <tr>
              <td colspan="" rowspan="" headers="">sbsbsbsbsbsbsbsbsbsb</td>
              <td colspan="" rowspan="" headers="">nieinieinieinieiniei</td>
          </tr>
      </tbody>
  </table>





  </body>
</html>

qq1234123455767879
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
java中表格隔行变色_【JavaWeb】TableDemo 表格隔行显色+鼠标悬停高亮显示
weixin_30784365的博客
02-24 901
【普通表格-非隔行显色】approach1window.onload = function () {//#-----非隔行显色---需要css辅助-------------------------------------------function mouseover (){var rows = document.getElementsByTagName('tr');//取得行for(var i=...
javascript实现table表格隔行变色的方法
12-11
本文实例讲述了javascript实现table表格隔行变色的方法。分享给大家供大家参考。具体实现方法如下： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>table间隔色</title> [removed] function SetTableColor() { var tbl = document.getElementById("tbl
表格隔行变色
娓娓道来
08-06 805
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { ...
java前台给table表格隔行换色_使用JQ完成表格隔行换色的简单实例
weixin_42413455的博客
03-08 342
1、步骤分析：第一步：引入jquery的类库第二步：直接写页面加载函数第三步：直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行)第四步：分别使用css的方法(css(name,value))对奇数行和偶数行设置背景颜色。2、具体代码实现：使用jQuery完成表格隔行换色//1.页面加载$(function(){//2.获取tbody下面的偶数行并设置背景颜色$("tbod...
实现表格的隔行变色
11-13
实现表格的隔行变色
Table隔行变色的JavaScript代码
10-28
用js实现的table隔行变色，鼠标放上去有变色显示，需要的朋友可以参考下。
CSS+JS实现table隔行变色
05-24
对于table隔行变色，我们可以创建一个类，比如`.zebra-stripes`，然后将这个类添加到包含表格的`<table>`元素上。以下是一个简单的CSS示例： ```css .table.zebra-stripes tr:nth-child(odd) { background-color: ...
jquery选取商品隔行变色
09-22
在网页设计中，为了提升用户体验和视觉效果，我们经常需要对数据列表进行美化处理，比如隔行变色。"jQuery选取商品隔行变色"是一个常见的网页交互功能，主要用于电商网站的商品列表展示，使得用户在浏览长列表时能更...
CSS2+JS实现table隔行变色
05-07
在网页设计中，为了提升数据表格的可读性，我们经常需要实现表格的隔行变色效果。这个功能可以通过结合CSS2和JavaScript来轻松完成。本文将详细介绍如何使用这两种技术来实现这一效果，并提供一个简单易懂的示例供您...
表格跨行时隔行变色
weixin_34199335的博客
07-15 121
2019独角兽企业重金招聘Python工程师标准>>> ...
表格渲染(悬浮变色,隔行换色,点击变色)
09-08
/** * * @author 翟正强 广东中山中南中南T25班 * @version1.0 * @2009-09-08 * @表格渲染(悬浮变色,隔行换色,点击变色) */
[蓝桥杯/java/算法]A——隔行变色
DuFengYa的博客
12-19 192
Excel表的格子很多，为了避免把某行的数据和相邻行混淆，可以采用隔行变色的样式。 小明设计的样式为：第1行蓝色，第2行白色，第3行蓝色，第4行白色，… 现在小明想知道，从第21行到第50行一共包含了多少个蓝色的行。 请你直接提交这个整数，千万不要填写任何多余的内容。
jquery实现表格的隔行变色
java学习
06-10 1489
无标题文档     .datalist{         border-color:#669900;   font-family:Arial, Helvetica, sans-serif;   border-collapse:collapse;   background-color:#66CC99;  }  .datalist th{                 background-colo
Java蓝桥杯15年第一题隔行变色
m0_48781254的博客
07-15 83
Java隔行变色 Excel表的格子很多，为了避免把某行的数据和相邻行混淆，可以采用隔行变色的样式。 小明设计的样式为：第1行蓝色，第2行白色，第3行蓝色，第4行白色，.... 现在小明想知道，从第21行到第50行一共包含了多少个蓝色的行。 请你直接提交这个整数，千万不要填写任何多余的内容。 ```java public class Demo1 { public static void main(String[] args) { int sum=0; for(int i=21;i<=50;
jQuery实现表格隔行换颜色：
迷彩风情
01-28 116
jQuery实现表格各行换颜色： 截图如下： 代码如下： &lt;span style="font-family:Microsoft YaHei;font-size:14px;"&gt;&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt; &lt;% String path = re
纯css表格table隔行显示不同颜色
泪的结晶的博客
09-27 4999
1.table tr:nth-child(odd){background: #ccc;} 结果如图所示可设置奇数行背景： 2.table tr:nth-child(even){background: #ccc;} 结果如图所示可设置偶数行背景：
JavaScript实现表格的隔行换色以及高亮显示
java面试笔试
09-15 757
有些时候，我们会从后台获取数据，然后以表格的形式显示到前台页面~但是如果数据量很大的话就会不利于查看~也就是我们常说的注意用户体验~总之用户不开心~那么老板就会不开心，老...
vxe-table隔行变色
最新发布
03-07
vxe-table是一个基于Vue.js的强大的表格组件库，它提供了丰富的功能和灵活的配置选项。其中，隔行变色是vxe-table的一个常见需求，可以通过设置表格的奇偶行样式来实现。 在vxe-table中，可以通过设置表格的stripe属性来开启隔行变色效果。当stripe属性设置为true时，奇数行和偶数行会有不同的背景色，以便更好地区分行。 以下是设置vxe-table隔行变色的示例代码： ```html <template> <vxe-table :data="tableData" stripe> <!-- 表格列配置 --> <vxe-table-column type="index" title="序号"></vxe-table-column> <vxe-table-column field="name" title="姓名"></vxe-table-column> <vxe-table-column field="age" title="年龄"></vxe-table-column> </vxe-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 20 }, { name: '李四', age: 25 }, { name: '王五', age: 30 }, { name: '赵六', age: 35 }, ], }; }, }; </script> ``` 在上述代码中，通过设置`stripe`属性为`true`，即可实现vxe-table的隔行变色效果。同时，还可以根据实际需求进行其他样式的自定义配置。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值