HTML 表格 点击一列改变这一列的背景颜色 代码怎么实现 高手进

HTML 表格 点击一列改变这一列的背景颜色 代码怎么实现 高手进,第1张

<table width="200" border="1">

<tr onmouseover="thisstylebackgroundColor='#ccc';" onmouseout="thisstylebackgroundColor='#fff';">

<td>表格内容</td>

<td>表格内容</td>

<td>表格内容</td>

</tr>

<tr onmouseover="thisstylebackgroundColor='#ccc';" onmouseout="thisstylebackgroundColor='#fff';">

<td>表格内容</td>

<td>表格内容</td>

<td>表格内容</td>

</tr>

<tr onmouseover="thisstylebackgroundColor='#ccc';" onmouseout="thisstylebackgroundColor='#fff';">

<td>表格内容</td>

<td>表格内容</td>

<td>表格内容</td>

</tr>

</table>

<table

width="600"

border="1"

bordercolor="green"

cellspacing="0"

cellpadding="0"

bgcolor="yellow">

<tr>

<td

width="150"

height="150">-&-n-b-s-p-;-

</td>

<td>-&-n-b-s-p-;-

</td>

<td>-&-n-b-s-p-;-

</td>

<td>-&-n-b-s-p-;-

</td>

</tr>

<tr>

<td

height="150">-&-n-b-s-p-;-

</td>

<td>-&-n-b-s-p-;-

</td>

<td>-&-n-b-s-p-;-

</td>

<td>-&-n-b-s-p-;-

</td>

</tr>

<tr>

<td

height="150">-&-n-b-s-p-;-

</td>

<td>-&-n-b-s-p-;-

</td>

<td>-&-n-b-s-p-;-

</td>

<td>-&-n-b-s-p-;-

</td>

</tr>

<tr>

<td

height="150">-&-n-b-s-p-;-

</td>

<td>-&-n-b-s-p-;-

</td>

<td>-&-n-b-s-p-;-

</td>

<td>-&-n-b-s-p-;-

</td>

</tr>

</table>

注:实际代码中请把-&-n-b-s-p-;-

中的-去掉,因为这里去掉的话提交的回答也以为是空格了。

bordercolor为边框色,这里为绿色,你可自己更改,bgcolor背景色为**,所有颜色也可以用#FF00FF这样的颜色代码表示。

1、HTML中设置单元格的背景色都是通过CSS

标签中的background 属性来完成。

2、例如,给整个页面(body)设置背景色:body{background: #ddd;};如果要将作为背景色:body{background-image: url(1jpg);},其中url括号后面的是背景的链接。 vivat 02-22 15:13 优质作者 关注 为你推荐 电脑上显示您访问的网页出错了 访问网页出错解决办法 婴儿米粉怎么吃 婴儿米粉的吃法 各种花的开放时间 花朵什么时间开花 cf连接服务器失败 解决方法介绍 热带鱼品种有哪些 两点为你介绍 笔记本怎么关机 两个方法教你关机 朝代顺序歌 两种方式教你记住朝代 第一张黑洞照片谁拍的 两点带你了解 平方米怎么打 2种方法教你打出来 电脑屏幕闪烁怎么回事 电脑屏幕闪烁的原因与解决办法 lol酒桶介绍 lol酒桶简介 盲僧怎么玩 LOL盲僧新手怎样玩好 煤油的比热容是多少 煤油的比热容介绍 氨气的性质 氨气的性质是什么 成熟的标志是什么 成熟是什么 计算机网络的分类知识 各自是什么特点 圣q游侠出装 圣q游侠出装顺序 计算机网络的定义 计算机网络有什么特点 黄瓜栽培技术 什么是黄瓜 12306怎么添加新乘客 添加乘客的步骤 建行xyk注销流程是什么 具体怎么 *** 作 侠客风云传大地图攻略 怎么过风云传大地图 开网店步骤 具体是怎么 *** 作的 好习惯的养成方法 好习惯的养成方法 马桶的尺寸一般是多少 来看看吧 空格怎么打 空格打的方法 qq空间权限怎么设置 具体怎么 *** 作 找不到网络路径怎么办 找不到网络路径的方法 凉州词王翰全文 这里有完整的原文译文介绍 降低胆固醇吃什么 可以试试这些食物 朝三暮四造句 朝三暮四如何造句 溶液的概念 溶液的概念是什么 放生的功德有哪些 放生的定义 救护车标志有什么含义 救护车标志如怎么来的呢 电脑蓝屏重启怎么办 电脑蓝屏是指什么 埃其亚基在哪 魔兽怀旧服埃其亚基在哪 she解散了吗 她们是什么时候出道的 侍魂2出招表 怎么出招侍魂2 恭恭敬敬的近义词 恭恭敬敬出自哪里 flash动画教程 具体是怎么制作的 怎么消除双下巴 怎么减双下巴 什么是命运 来看看解释吧 怎么知道怀孕 怎么知道自己怀孕了 足球的规则是什么 足球的基本规则是什么 什么植物防辐射 他们有什么特点 平均数的概念 平均数的概念是什么 策划怎么写 怎么正确书写策划书 太极拳自学教程 太极拳详细教程 缺乏维生素e的症状 有哪些症状呢 抑扬顿挫造句 抑扬顿挫如何造句

单是html不可以,要结合css一起,先引进css一个选择器,然后在后面的html中导入就可以

像这样

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>李白的诗——《望庐山瀑布》</title>

<style type="text/css">

p {

font-size:14px;

color:green;

}

</style>

</head>

<body>

<h2>望庐山瀑布</h2>

<p>日照香炉生紫烟,</p>

<p>遥看瀑布挂前川。</p>

<p>飞流直下三千尺,</p>

<p>疑是银河落九天。</p>

</body>

</html>

<html xmlns="http://wwww3org/1999/xhtml">

<head>

    <title>表格效果</title>

    <style type="text/css">

        highlight

        {

            background-color: red;

        }

        selected

        {

            background-color: blue;

        }

        style1

        {

            width: 247px;

        }

tr_w{background-color: white;  }

tr_g{background-color: #808080;  }

    </style>

    <script src="JS/jquery-142minjs" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("tr")click(function () {

                $(this)toggleClass("selected");

            });

            $("tr")hover(

            function () { $(this)removeClass("tr_g tr_w")addClass("highlight"); },

            function () { if(!$(this)hasClass("selected")){table_tr();$(this)removeClass("highlight");} }

            ); 

    table_tr();

        });

        

function table_tr(){

    $("tr:odd")addClass("tr_g"); //先排除第一行,然后给奇数行添加样式

            $("tr:even")addClass("tr_w"); //先排除第一行,然后给偶数行添加样式

}

    </script>

</head>

<body>

<div id="main">

    <table border="1"; style="height: 79px; width: 827px;" >

        <tr>

            <td>

                12

            </td>

            <td>

                12

            </td>

            <td >

                12

            </td>

        </tr>

        <tr>

            <td>

                12

            </td>

            <td>

                12

            </td>

            <td >

                12

            </td>

        </tr>

    </table>

    </div>

</body>

</html>

给你改了点样式,和修改了一点js代码

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/12178059.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-21
下一篇 2023-05-21

发表评论

登录后才能评论

评论列表(0条)

保存