JS td 动态事件的处理_动态事件 js-优快云博客

本文链接：https://blog.youkuaiyun.com/grs294845170/article/details/77528994

在Django网站中，为HTML表格的动态生成tr使用JavaScript的each方法实现鼠标悬停显示td内容。初始尝试on和live方法绑定事件无效，最终通过遍历解决。同时，由于haystack的'hightlight'标签无法用于全文搜索结果的关键字高亮，采用JS正则表达式进行批量替换完成高亮，其中 '#keyword' 作为后台传来的关键字，作用于 '.gradeX' 类的动态tr上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

django 写了个网站,在HTML上动态生成了许多tr和td,目前一个需求就是鼠标移到某个tr上就弹出相应的td的内容,一开始是用js on和live方法给全部tr绑定动态事件,后来发现没效果,最后用each 遍历全部tr 才搞好的

代码如下:

var edn = '';
    $('.gradeX #image').each(function () {
        $(this).mouseover(function(){
        edn = $(this).html();
        edn = edn.replace('<span id="tip" style="display: none">', '<span id="tip">');
        $(this).html(edn);
})
})
var edn = '';
    $('.gradeX #image').each(function () {
        $(this).mouseout(function(){
        edn = $(this).html();
        edn = edn.replace('<span id="tip">', '<span id="tip" style="display: none">');
        $(this).html(edn);
})
});

'.gradeX'是tr的class, '#image' 是td内一个div的id,是用替换源代码的形式完成提示的

另外弄了下django的全文搜索,因为搜索结果在渲染之前需要处理一下,haystack自带的'hightlight' 关键字高亮tag用不了,所以关键字高亮我用js 的正则表达式批量替换完成的:

function changecolor () {
        var a = $('#keyword').html();
        var edn = '';
        $('.gradeX').each(function () {
        edn = $(this).html();
        var b = '<strong style="color: #ff3928">' + a + '</strong>'
        var reg=new RegExp(a,"g");
        var newstr=edn.replace(reg, b);
        $(this).html(newstr);
})