javascript - 选中时突出显示表格行

标签 javascript jquery html css

<分区>

我试图做到这一点,以便在单击某一行时,它会突出显示(以明确它是当前选定的行)。当单击另一行时,先前选择的行变为未突出显示,新行变为突出显示。

截至目前,发生的情况是,当我将鼠标悬停在一行上时,它会突出显示(按计划工作),但是当我单击时,行的背景颜色不会改变。下面是我的一些代码,在此先感谢。

这里是一些HTML的例子:

    <tr class="text_data selected_grey" onclick="getReportDetails(this, 'johndoe@gmail.com');">
        <td class="text">John</td> 
        <td class="text"> Doe</td>
    </tr>
    <tr class="text_data selected_grey" onclick="getReportDetails(this, 'sarah@gmail.com);">
        <td class="text">Sarah</td> 
        <td class="text">Dean</td>
    </tr>

这是我的 Javascript getReportDetails 函数的相关部分。

function getReportDetails(elem, email) {


var j_elem = $(elem);

$(".text_data").each(function() {
    if ($(this).is(j_elem)) {
        j_elem.addClass("selected_grey");
    } else {
        $(this).removeClass("selected_grey");
    }
});

这是涉及的CSS

.text_data {
    font-family: Verdana;
    font-size: 12px;
    font-weight: none;
}
.text_data:hover{
    cursor: pointer;
    background-color: #E0E0E0;
}
.selected_grey {
    background-color: #E0E0E0;
}

编辑:原来只是缓存问题。

最佳答案

要切换表格行点击,检查如下:

JSFiddle:http://jsfiddle.net/ta6r6e7g/

HTML:

<table>
      <tr class="text_data selected_grey" onclick="getReportDetails(this, 'johndoe@gmail.com');">
        <td class="text">John</td> 
        <td class="text"> Doe</td>
    </tr>
    <tr class="text_data selected_grey" onclick="getReportDetails(this, 'sarah@gmail.com);">
        <td class="text">Sarah</td> 
        <td class="text">Dean</td>
    </tr>
  </table>

JQuery:

$(".text_data td").on("click", function() {
    var tr = $(this).parent();
    if(tr.hasClass("selected")) {
        tr.removeClass("selected");
    } else {
        tr.addClass("selected");
    }

});

CSS:

tr.selected td {
    background-color: #333;
    color: #fff;    
}

关于javascript - 选中时突出显示表格行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25328844/

相关文章:

javascript - 开发自定义剑道 ui 小部件

html - CSS 定位问题仅在 Safari 中

javascript - 获取多个 $_POST 元素的值

javascript - Jquery 是否可以在页面上每显示 5 次后更改一个类?

javascript - promise 在 vscode 中异步/等待

javascript - 如何在javascript中声明特定类型的数组

javascript - ngClick 上的 Angular 父级和子级 ngHide

php - 如何在 jQuery 上循环遍历这个 JSON 数组?

javascript - 如何在 lightGallery 中动态更改图像 url

javascript - 如何避免 "Forcing rebuild: JavaScript files need to be re-encrypted"