发表新帖
发表新帖

[removed] Bold all table td entries which contain “*sometext*” on mouse-over

前端 未结
关注
3 1123
执笔经年
执笔经年 2021-01-27 12:34

I have a table element on some page. It contains some table rows with cells, containing hrefs.

My target is: when I point mouse cursor over som

相关标签:
3条回答
  • 离开以前
    2021-01-27 13:07

    Best method would be to set class to any cell with the specific text while making the HTML. If it's impossible, You can use simple script to do so on load:

    <!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>

    If you can do it ahead - then simply to the 'bolding' td's add :

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

    and all the js is useless.

    0 讨论(0)
  • 半阙折子戏
    2021-01-27 13:15

    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);
    });
}
    0 讨论(0)
  • Happy的楠姐
    2021-01-27 13:16

    Using jQuery (which you said may be acceptable) it could be something like this:

    $(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/

    When mouse enters anchor within TD - code looks for all anchors within TDs that have the same text and bolds them.

    When mouse leaves the anchor - font-weight returns to normal.

    0 讨论(0)
 看不清?
提交回复
热议问题