点击表格每行时变色

最新推荐文章于 2023-08-28 11:21:28 发布

柒涩波

最新推荐文章于 2023-08-28 11:21:28 发布

阅读量356

点赞数

分类专栏： JS 文章标签： js jquery

本文链接：https://blog.csdn.net/qq_41895296/article/details/109163597

版权

JS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

点击动态生成的表格每行时变色

<!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>select-row</title>
</head>
<body>
	<div>
		<table id="tab-show"></table>
	</div>
</body>
</html>

let index;
let name;
let tr = $('<tr onclick=selectRow(this)><th>+ index +</th><th title="+ name +"></tr>');
$('#tab-show').append(tr);


// 设置点击表格每行选中变色
let selectTr = null;
function selectRow(obj) {
	if (obj) {
		if (selectTr) {
			selectTr.style.backgroundColor = '';
			selectTr = obj;
			selectTr.style.backgroundColor = '#4ca9f7';
		} else {
			selectTr = obj;
			selectTr.style.backgroundColor = '#4ca9f7';
		}
	} else {
		if (selectTr) {
			selectTr.style.backgroundColor = '';
			selectTr = null;
		}
	}
}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

柒涩波

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击表格每行时变色

点击动态生成的表格每行时变色<!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&.
复制链接

扫一扫