Question

我在某个页面上有一个table元素。它包含一些带有单元格的表行，包含href s。

我的目标是：当我将鼠标光标指向某些带有文本“sometext”的href时，包含此“sometext”文本的所有表格href将变为粗体文本。在鼠标移出时，所有href应该进入正常状态。

谢谢， Venelin

Answer 1

使用jQuery（你说可以接受）可能是这样的：

$(document).ready(function(){
   $('td > a').hover(
       function() {
           $('td > a:contains("' + this.innerHTML + '")').css('font-weight', 'bold')
       },
       function() {
           $('td > a').css('font-weight', 'normal')
       }
   )
})

DEMO： http://jsfiddle.net/2ATc5/3/

当鼠标在TD中输入锚点时 - 代码会查找TD中具有相同文本并加粗的所有锚点。

当鼠标离开锚点时 - font-weight恢复正常。

Answer 2

http://jsfiddle.net/f82KA/14/

<table>
    <tr><td><a href="#">Android</a><a href="#">Applesometext</a><a href="#">Symbiansometext</a></td><td><a href="#">Android</a></td></tr>
    <tr><td><a href="#">Windows</a><a href="#">Symbiansometext</a><a href="#">Applesometext</a></td><td><a href="#">Windows</a></td></tr>
</table>

var p = /sometext/;
var s = document.querySelectorAll('td a');

function boldAll(b) {
    for(var i=0;i<s.length;i++) {
        if(b) {
            if(p.test(s[i].innerHTML)) {
                s[i].style.fontWeight = 'bold';
            }
        } else {
            s[i].style.fontWeight = 'normal';
        }
    }
}

function h(e) {
    if(p.test(e.target.innerHTML)) {
        boldAll(true);
    }
}

for(var i=0;i<s.length;i++) {
    s[i].addEventListener('mouseover',h);
    s[i].addEventListener('mouseout',function(e) {
        boldAll(false);
    });
}

Answer 3

最佳方法是在制作HTML时将类设置为具有特定文本的任何单元格。如果不可能，您可以使用简单的脚本在加载时执行此操作：

<!DOCTYPE html >
 <html>
   <head>
     <title> Bla! </title>
     <style type='text/css'>
        td.boldOn:hover { font-weight:bold; color:red; }
     </style>
     <script type='text/javascript'>
        function Init() {
            var obj = document.getElementById('tblId');
            for (var i =0, row; row=obj.rows[i]; i++) {
                for (var j=0, cell; cell= row.cells[j]; j++) {
                    if( cell.innerHTML.indexOf('ing') != -1) {
                        cell.className = 'boldOn';
                    }
                }
            }
        }
     </script>
   </head>
   <body onload='Init();'>
        <table id='tblId' border='1'>
            <tr>
                <td> not bold </td>
                <td> bolding </td>
                <td> not bold </td>
                <td> bolding </td>
            </tr>
            <tr>
                <td> not bold </td>
                <td> bolding </td>
                <td> not bold </td>
                <td> bolding </td>
            </tr>
        </table>
   </body>
 </html>

如果你可以提前做 - 那么只需要'加粗'td的补充：

<td class='boldOn'> bolding </td>

并且所有的j都没用。

JavaScript：在鼠标悬停时加粗包含“* sometext *”的所有表格td条目

3 个答案: