添加/刪除邊界TR使用JQuery

請看下面的jsfiddle：JSFiddle Link添加/刪除邊界TR使用JQuery

我的JQuery：

$('.tr1').addClass('addBorder'); 
$('.tr2').removeClass('removeBorder'); 

$('#bName').click(function() { 
    $('.tr1').addClass('addBorder'); 
    $('.tr2').addClass('removeBorder'); 
}); 
$('#bSpecialty').click(function() { 
    $('.tr2').addClass('addBorder'); 
    $('.tr1').addClass('removeBorder'); 
});

這是假設，使BY Name行有雙藍色的邊框，並根據用戶從單選按鈕選擇應使該行有藍色邊框，並從沒有選擇的行刪除邊框。由於某種原因，它不工作。

我試過toggleClass();但刪除了現有的類，這將不起作用，因爲用戶應該能夠多次點擊相同的單選按鈕，並且類不應該改變。如果單擊其他單選按鈕，它應該只改變。

來源

2013-05-14 Si8

您應該添加邊框的表格單元格沒有行。你也不需要添加兩個不同的類。相反，你可以只添加邊框addClass，另一個添加邊框和removeClass。見DEMO：http://jsfiddle.net/XZ5eg/

$(function() { 
    var $rowName = $('.tr1 td'); 
    var $rowSpeciality = $('.tr2 td'); 

    $rowName.addClass('addBorder'); 
    $rowSpeciality.removeClass('removeBorder'); 

    $('#bName').click(function() { 
     $rowName.addClass('addBorder'); 
     $rowSpeciality.removeClass('addBorder');  
    }); 
    $('#bSpecialty').click(function() { 
     $rowSpeciality.addClass('addBorder'); 
     $rowName.removeClass('addBorder'); 
    }); 

});

來源

2013-05-14 19:22:09

我一直在尋找這樣做，你幫了我。我實際上可以使用TR來添加類。 – Si8

我同意只有一堂課。：）謝謝！ – Si8

你也應該刪除從表細胞類「removeBorder」，否則你將同時擁有「addBorder」和「removeBorder」這個元素上。

$('#bName').click(function() { 
    $('.tr1 td').removeClass('removeBorder'); 
    $('.tr1 td').addClass('addBorder'); 
    $('.tr2 td').addClass('removeBorder'); 
}); 
$('#bSpecialty').click(function() { 
    $('.tr2 td').removeClass('removeBorder'); 
    $('.tr2 td').addClass('addBorder'); 
    $('.tr1 td').addClass('removeBorder'); 
});

來源

2013-05-14 19:25:03 andersandersson666

這不是你所需要的：

$('.tr1 td').addClass('addBorder'); 
$('#bName,#bSpecialty').click(function() { 
    $('td').toggleClass('removeBorder, addBorder '); 
});

jsFiddle example

來源

2013-05-14 19:25:54 j08691

@Vega做了我想做的事，但你的工作是一樣的。謝謝:) – Si8

或者只是'$（'td'）。toggleClass（'addBorder'）;'> http://jsfiddle.net/wv3g3/ –

添加/刪除邊界TR使用JQuery

回答

相關問題