JavaScript：粗体显示所有包含“"*sometext*”；鼠标悬停_Javascript_Css

JavaScript：粗体显示所有包含“"*sometext*”；鼠标悬停

javascript css

JavaScript：粗体显示所有包含“"*sometext*”；鼠标悬停,javascript,css,Javascript,Css,我在某个页面上有一个表元素。它包含一些带有单元格的表行，其中包含hrefs 我的目标是：当我将鼠标指针指向带有文本“sometext”的某个href时，所有包含此“sometext”文本的表href都将变为粗体文本。鼠标退出时，所有HREF都应进入正常状态谢谢， Venelin使用jQuery（您说可以接受），它可能是这样的： $(document).ready(function(){ $('td > a').hover( function() {

我在某个页面上有一个

表

元素。它包含一些带有单元格的表行，其中包含

href

我的目标是：当我将鼠标指针指向带有文本“sometext”的某个

href

时，所有包含此“sometext”文本的表href都将变为粗体文本。鼠标退出时，所有HREF都应进入正常状态

谢谢， Venelin

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

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

演示：

当鼠标进入TD内的锚点时，代码将查找TDs内具有相同文本的所有锚点并将其加粗

当鼠标离开定位点时，字体重量恢复正常。

var p=/sometext/；
var s=document.querySelectorAll（'td a'）；
函数boldAll（b）{
对于（var i=0；i来说，最好的方法是在生成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.boldOn:hover{font-weight:bold；color:red；}
函数Init（）{
var obj=document.getElementById（'tblId'）；
for（变量i=0，行；行=obj.rows[i]；i++）{
for（var j=0，cell；cell=row.cells[j]；j++）{
if（cell.innerHTML.indexOf（'ing'）！=-1）{
cell.className='boldOn'；
}
}
}
}
不大胆
大胆的
不大胆
大胆的
不大胆
大胆的
不大胆
大胆的

如果你能提前完成，那么只需在td的“加粗”部分添加：
<td class='boldOn'> bolding </td>

加粗

所有的js都是无用的。
你一定要使用纯JavaScript还是可以使用jQuery？我更喜欢原始js，但欢迎任何建议。如果你能发布一些HTML示例，它会让你得到更快、更准确的答案。嗨，伙计，谢谢你在这个答案中所做的努力。我尝试在页面的标题部分添加此内容，但当我点击时没有改变将鼠标悬停在单元格中的某个href上。抱歉。哦，恐怕您没有回答问题。请尝试Yuriy Galanter链接，它可以满足需要，但我无法使其适用于我的页面。是的，我使用标记：）@VenelinSpiridonov您，先生！您访问过这个链接吗？-？是的，伙计。请再次检查我的问题。我需要在表格单元格中有多个href，当鼠标指向表格单元格中的一个href时，表格中所有文本相同的href都必须变为粗体。：）让我们大家好，Yuriy，谢谢您的回答。我刚刚下载了jquery，添加了它，尝试了您的方法在我的页面中添加代码，但没有成功。我非常喜欢短代码方法，但在这种情况下，我无法归档我的目标。@VenelinSpiridonov确保在页面中包含对jQuery.JS的引用，并将代码包装到document.ready（）
-查看上面更新的代码这是结果“[错误]TypeError:“undefined”不是一个函数（计算“document.ready”）全局代码“My bad”。它应该是$（document.ready（）。更新了代码很高兴这很有帮助：）对于途中的错误，我很抱歉。现在，由于您使用jQuery，对于其他问题和功能，您的生活应该会变得更加轻松。这是一种有价值的循环。我如何扩展它以循环单元格中的所有HREF并检查它们的包含。
<!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 class='boldOn'> bolding </td>