腾讯笔试题：前端table点击触发单元格所在行列样式变化

最新推荐文章于 2022-10-17 07:57:59 发布

旭氏美术馆

最新推荐文章于 2022-10-17 07:57:59 发布

阅读量305

点赞数

分类专栏：面试真题 js css 文章标签：腾讯 jquery dom css

本文链接：https://blog.csdn.net/ChenXvYuan_001/article/details/108190065

版权

js 同时被 3 个专栏收录

40 篇文章 1 订阅

订阅专栏

面试真题

12 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

实现效果就是点击表格，触发所在行列样式变化，如图所示“
在这里插入图片描述

html

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
	<div id="jsContainer">
    <table class="game">
        <tbody>
            <tr><td></td><td></td><td></td><td></td><td class="wrap"></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td class="wrap"></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td class="wrap"></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td class="wrap"></td><td></td><td></td><td></td><td></td></tr>
            <tr><td class="wrap"></td><td class="wrap"></td><td class="wrap"></td><td class="wrap"></td><td class="current"></td><td class="wrap"></td><td class="wrap"></td><td class="wrap"></td><td class="wrap"></td></tr>
            <tr><td></td><td></td><td></td><td></td><td class="wrap"></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td class="wrap"></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td class="wrap"></td><td></td><td></td><td></td><td></td></tr>
            <tr><td></td><td></td><td></td><td></td><td class="wrap"></td><td></td><td></td><td></td><td></td></tr>
        </tbody>
    </table>
</div>
</body>
</html>

css

table.game {
    font-size: 14px;
    border-collapse: collapse;
    width: 100%;
    table-layout: fixed;
}
table.game td {
    border: 1px solid #e1e1e1;
    padding: 0;
    height: 30px;
    text-align: center;
}
table.game td.current{
    background: #1890ff;
}
table.game td.wrap{
    background: #f5f5f5;
}

 $('td').click(function(e){
   			//删除所有的样式
   		  $('td').removeClass()
        //获取当前的行列
        let col=$(this).parent().index(),row=$(this).index();
   		  
   			//获取所在行
   		  $('tbody tr:eq('+col+')').children().each(function(){
               $(this).addClass('wrap',{'background':' #f5f5f5'})  
         })
   			//获取所在列
         $('tbody tr').each(function(){
           $(this).children().eq(row).addClass('wrap',{'background':' #f5f5f5'})  
         })
   			//点击单元格样式设为蓝色
   			$(this).removeClass('wrap')
   			$(this).addClass('current',{'background':'#1890ff'})
    })

旭氏美术馆

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
腾讯笔试题：前端table点击触发单元格所在行列样式变化

实现效果就是点击表格，触发所在行列样式变化，如图所示“html<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script><!DOCTYPE html><html><head><meta charset="utf-8"><title>文档标题</title></head><bod
复制链接

扫一扫