Question

我正在使用mouseover()，mouseout()和click()突出显示鼠标悬停时的行，并在点击时添加突出显示类：

    //Mouseover any row by adding class=mouseRow
    $(".mouseRow tr").mouseover(function() {
        $(this).addClass("ui-state-active");
    });
    $(".mouseRow tr").mouseout(function() {
        $(this).removeClass("ui-state-active");
    });
    $('.mouseRow tr').click(function(event) {
        $(this).toggleClass('selectRow'); 
    });

上面的代码将允许用户“突出显示”（即将类selectRow）添加到他们想要的任意数量的行中。使用jQuery的最佳方法是将他们可以选择的行数限制为只有一行（这样如果他们点击一行，然后点击另一行，它将从之前选择的行中删除“selectRow”类）？

Answer 1

您可以从所有selectRow元素中删除tr类，除非您点击其中一个，然后在点击的元素上切换它：

$('.mouseRow tr').click(function(event) {
    $('.mouseRow tr').not(this).removeClass('selectRow');
    $(this).toggleClass('selectRow'); 
});

这是working example。

Answer 2

Use this script at end of your html,meant after </body> tag

<script>
 $("tr").hover(function() 
 {
   $(this).addClass("hover"); 
 }, function()
    {
    $(this).removeClass("hover");
    });
$('tr').click(function(event) {
        $('tr').not(this).removeClass('click');
        $(this).toggleClass('click'); 
    });
</script>


This is css that highlight your row:

    .click{
background:#FF9900;
color: white
}

.hover{
background:blue;
color: white
}

here is the link of working example

Working example

Hope this will help

Answer 3

当我第一次尝试使用CSS中的＆＃39; .clicked＆＃39; -Class的toggleClass / removeClass-way时，结果却落后了一点。所以，我做了这个，而不是更好/更快：

$(document).on('click', '.DTA', function (event) {        
    $('.DTA').not(this).css('backgroundColor', "#FFF");
    $(this).css('backgroundColor', "#FAA");        
});

这是小提琴：https://jsfiddle.net/MonteCrypto/mxdqe97u/27/

Answer 4

$('.mouseRow tr').click(function(event) {
        if (!$(this).hasClass('selectRow')){
           $('.selectRow').removeClass('selectRow');
           $(this).addClass('selectRow'); 
        } else {
           $('.selectRow').removeClass('selectRow');
        }
});

应该做的伎俩。请注意，如果您不想删除if(){和} else { ... }部分，则仍然可以进行切换：

           $('.selectRow').removeClass('selectRow');
           $(this).addClass('selectRow');

Answer 5

你可以试试这个：

$('.mouseRow tr').click(function(event) {
    $('.mouseRow tr').each(function(index) {
        $(this).removeClass('selectRow');
    });
    $(this).toggleClass('selectRow'); 
});

您还可以使用.find()方法并使用逻辑来检查是否有任何元素在删除所有元素之前首先拥有此类。

Answer 6

使用带有tbody id ='selectable'的jquery-ui .selectable函数：

$(function() {
    $("#selectable").selectable({
        filter: "tr", //only allows table rows to be selected
        tolerance: "fit", //makes it difficult to select rows by dragging
        selected : function(event, ui) {
            var rowid = "#"+ui.selected.id; //gets the selected row id
            //unselects previously selected row(s)
            $('tr').not(rowid).removeClass('ui-selected');
        }
    });
});

我动态创建的每个表行的id都是'task'+ i

只使用jquery一次选择一行

6 个答案: