亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

單擊單選按鈕時更改表格中的邊框顏色

單擊單選按鈕時更改表格中的邊框顏色

HUWWW 2021-11-12 14:12:44
我試圖在單擊單選按鈕時更改表格中的邊框顏色。我試過使用 jQuery,但結果不是我所期望的。這是我的代碼:https : //codepen.io/ervannnn/pen/gOObrdPjavascript:$('input[type=radio]').change(function() {        $('.box-tr-1').removeClass().addClass('box-tr-1-se');    $(this).parent().addClass('box-tr-1');});css:table {    border-collapse: collapse;}.table-item {    width: 90%;}.box-tr-1 {    border-left: 4px solid #ddd;    border-right: 4px solid #ddd;    border-top: 4px solid #ddd;}.box-tr-2 {    border-left: 4px solid #ddd;    border-right: 4px solid #ddd;}.box-tr-3 {    border-top: 4px solid #ddd;}.box-tr-1-se {    border-left: 4px solid red;    border-right: 4px solid red;    border-top: 4px solid red;}.box-tr-2-se {    border-left: 4px solid red;    border-right: 4px solid red;}.box-tr-3-se {    border-top: 4px solid red;}代碼筆:https ://codepen.io/ervannnn/pen/gOObrdP請幫助我,任何幫助將不勝感激,非常感謝!
查看完整描述

1 回答

?
天涯盡頭無女友

TA貢獻1831條經驗 獲得超9個贊

你的代碼有點亂,但它應該適合你的目的:


$('input[type=radio]').change(function() {   

  $('tr').each(function(){

    $(this).removeClass('box-tr-1-se');

    $(this).removeClass('box-tr-2-se');

  })

  if($(this).is(':checked')){

    $(this).parent().parent().addClass('box-tr-1-se');

    $(this).parent().parent().next().addClass('box-tr-2-se')          

  }

});


.box-tr-2-se {

  border-left: 4px solid red;

  border-right: 4px solid red;

  border-bottom: 4px solid red;

 }

編輯:添加/刪除文本顏色:


$('.table-item input[type=radio]').change(function() {

  $('.table-item tr').each(function(){

    //Previous methods...

    $(this).find('.red').removeClass('red')

  })

  if($(this).is(':checked')){

    //Previous methods...

    $(this).parent().next().children().eq(1).addClass('red');

  }

});


查看完整回答
反對 回復 2021-11-12
  • 1 回答
  • 0 關注
  • 132 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號