推荐关注
› Meteor
› JSLint - a JavaScript code quality tool
› jsFiddle
› D3.js
› WebStorm
推荐书目
› JavaScript 权威指南第 5 版
› Closure: The Definitive Guide
› Closure: The Definitive Guide
请教个思路，最终效果上来讲，原生 JS 如何可以使整行表格 tr 内容被一个红框包起来？
qazwsxkevin · 2021-01-13 00:24:26 +08:00 · 2204 次点击这是一个创建于 1411 天前的主题，其中的信息可能已经有所发展或是发生改变。
情况：
1 、是在“增强”别人用数组绘制的动态表格，想在上面略加效果，
2 、情况不允许用 Jquery，主要原因是公司去公网的防火墙没有对 Jquery 的 CDN 地址放白名单。
3 、因为表格里面本身有些 td 格子自带了颜色（颜色有具体代表不同的信息），如果 onmouseover,onmouseout 去改颜色变高亮，反而影响了使用。。。
4 、所以就想到了弄个红色的框来表现鼠标落在了这行内容上。。。
5 、试着写了一下，对 tr 各种.style 参数调了一下，好像没那么简单？。。。
6 、脸厚问，可有现成的参考一下？
//高亮 TR，目前只做了字体自动加粗，效果还不足够
var tab = document.getElementById('dataShow');
var trs = tab.getElementsByTagName('tr');//获取所有的 tr 标签
for (var i = 0; i < trs.length; i++) {
trs[i].onmouseover = function () { //鼠标移动上事件
if (this.style.fontWeight != "bolder") {
this.style.fontWeight = "bolder";
}
}
trs[i].onmouseout = function () { //鼠标移出事件
if (this.style.fontWeight == "bolder") {
this.style.fontWeight = "normal";
}
}
}
 |
1
versionlin 2021-01-13 00:49:59 +08:00 via Android
用 css 不行么
|
 |
2
VDimos 2021-01-13 01:16:52 +08:00 via Android
做表格样式的都是大神，尤其对 tr thead tbody 做样式的。这些标签样式很多都不能用
|
 |
3
walpurgis 2021-01-13 01:20:47 +08:00  3
var tab = document.getElementById('dataShow');
tab.style.borderCollapse = 'collapse'; // tr 设置 border 需要 table 为 collapse var trs = document.getElementsByTagName('tr'); for (let i = 0; i < trs.length; i++) { trs[i].addEventListener('mouseenter', () => { trs[i].style.border = '1px solid red' }) trs[i].addEventListener('mouseleave', () => { trs[i].style.border = '' }) } |
 |
4
Mutoo 2021-01-13 07:25:34 +08:00 via iPhone 2
CSS 的 :hover + outline 非常容易实现
用 outline 有几个好处： 1) 很少被使用，不会跟原有的 border 冲突 2) 纯视觉效果，不改变布局 |
 |
5
xuewuchen 2021-01-13 08:12:42 +08:00 1
呃。。我是新手不太明白啊，你下载一个 Jquery 到本地用不久可以了吗？
|
 |
7
devwolf 2021-01-13 09:22:21 +08:00
除了#说的 outline，我也经常用 box-shadow，总之是 border 样式的替代方案。
大 div 套小 div 漏一个框也是一种替代，不过看描述里“格子自带了颜色有具体代表不同的信息”,好像不能用大盒套小盒。 不知道能不能用反色（就是白字彩底）,当然我有看到描述 4 提到的“红色框”需求，只是我这边做表格效果时也常用反色，提议一下 |
 |
8
qazwsxkevin OP 没有来得及及时回复大家，说声谢谢了，最后我是这样完成的，应该是用了 CSS 吧。。。
``` //高亮 TR var tab = document.getElementById('showTable'); var trs = tab.getElementsByTagName('tr');//获取所有的 tr 标签 for (var i = 0; i < trs.length; i++) { if (i == 0) { continue } trs[i].onmouseover = function () { //鼠标移动上事件 if (this.style.fontWeight != "bolder") { this.style.fontWeight = "bolder"; this.style.outline = "#ff0e05 inset thick"; } } trs[i].onmouseout = function () { //鼠标移出事件 if (this.style.fontWeight == "bolder") { this.style.fontWeight = "normal"; this.style.outline = ""; } } } ``` |
Select Language