Как установить класс нажатием кнопки в таблицах html - PullRequest
Новая
       5

Как установить класс нажатием кнопки в таблицах html

3 голосов
/ 25 февраля 2020

У меня есть html таблиц, и я хотел бы изменить его class, щелкнув сам по себе.

Когда я изменяю класс, я хотел бы выбрать каждый класс, нажав button позади них

Моя попытка похожа на приведенную ниже. Как я могу забрать style, нажав button?

Спасибо 

    $('.click_btn').on('click', function(e) {
      e.preventDefault();
      style = $(this);   ??
    })

    $('.click_td').on('click', function(e) {
      e.preventDefault();
      $(this).AddClass(style);  ??
    });

    .style1{
        background: rgb(255, 0, 255);
        border-radius: 5px;
    }

    .style2 {
        background: rgb(0, 255, 255);
        border-radius: 5px;

    }

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table>
      <tr>
        <td class="click_td">color</td>
        <td class="click_td">color 2</td>
      </tr>
    </table>
    <button class="click_btn" class="style1">style1</button>
    <button class="click_btn" class="style2">style2</button>

Ответы [ 5 ]

3 голосов
/ 25 февраля 2020

Вы не должны иметь одни и те же атрибуты несколько раз в элементах, если вы сделаете так, что атрибуты после первого будут игнорироваться молча. Хотя лучшим подходом здесь будет использование data - * атрибута. Также есть опечатка в AddClass, должна быть addClass.

. Вы можете попробовать следующий способ: 

var style;
$('.click_btn').on('click', function(e) {
  e.preventDefault();
  style = $(this).data('style'); 
})

$('.click_td').on('click', function(e) {
  $(this).removeClass('style1, style2');
  e.preventDefault();
  $(this).addClass(style);  
  style = '';
});
.style1{
  background: rgb(255, 0, 255);
  border-radius: 5px;
  color: red;
}

.style2 {
  background: rgb(0, 255, 255);
  border-radius: 5px;
  color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="click_td">color</td>
    <td class="click_td">color 2</td>
  </tr>
</table>
<button class="click_btn" data-style="style1">style1</button>
<button class="click_btn" data-style="style2">style2</button>
3 голосов
/ 25 февраля 2020

Использование атрибута class более одного раза не является хорошей практикой, мы можем заменить его атрибутом data. Таким образом, при каждом нажатии кнопки берется значение атрибута data, затем это значение добавляется в таблицу td click_td ..

Теперь это делается при нажатии кнопки, но это также можно заменить щелчком td;) 

 var $ = jQuery;
 $('.click_btn').on('click', function(e) {
      e.preventDefault();
      style = $(this).data().style; 
     $('.click_td').removeClass('style1 style2').addClass(style)
    })
    .style1{
        background: rgb(255, 0, 255);
        border-radius: 5px;
    }

    .style2 {
        background: rgb(0, 255, 255);
        border-radius: 5px;

    }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table>
      <tr>
        <td class="click_td">color</td>
        <td class="click_td">color 2</td>
      </tr>
    </table>
    <button class="click_btn" data-style="style1">style1</button>
    <button class="click_btn" data-style="style2">style2</button>

Это второй метод, здесь стиль копируется в переменную и затем применяется к td при нажатии td

var $ = jQuery;
var style ='';
$('.click_btn').on('click', function(e) {
  e.preventDefault();
  style = $(this).data().style;
})

 $('.click_td').on('click', function(){
  $(this).removeClass('style1 style2').addClass(style)
 })
.style1 {
  background: rgb(255, 0, 255);
  border-radius: 5px;
}

.style2 {
  background: rgb(0, 255, 255);
  border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="click_td">color</td>
    <td class="click_td">color 2</td>
  </tr>
</table>
<button class="click_btn" data-style="style1">style1</button>
<button class="click_btn" data-style="style2">style2</button>
2 голосов
/ 25 февраля 2020 

$(()=>{
var style = $(this).attr('class');   
$('.click_btn').on('click', function(e) {
      e.preventDefault();
      style = $(this).attr('class');   
    })

    $('.click_td').on('click', function(e) {
      e.preventDefault();
      console.log(style);
      $(this).attr('class','');   
      $(this).addClass(style);  
    });
    })
 .style1{
        background: rgb(255, 0, 255);
        border-radius: 5px;
    }

    .style2 {
        background: rgb(0, 255, 255);
        border-radius: 5px;

    }
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table>
      <tr>
        <td class="click_td">color</td>
        <td class="click_td">color 2</td>
      </tr>
    </table>
    <button class="click_btn style1">style1</button>
    <button class="click_btn style2">style2</button>
2 голосов
/ 25 февраля 2020
  1. Вам нужно сохранить предыдущее значение стиля при установке стиля, чтобы удалить его в следующий раз.
  2. И есть два атрибута class в элементах кнопки.
  3. Попробуйте использовать innerText вместо class значения. 

let prevStyle = '';
let style = '';

$('.click_btn').on('click', function(e) {
  e.preventDefault();
  prevStyle = style;
  style = $(this).text();
})

$('.click_td').on('click', function(e) {
  e.preventDefault();
  $(this).removeClass(prevStyle);
  $(this).addClass(style);
});
.style1 {
  background: rgb(255, 0, 255);
  border-radius: 5px;
}

.style2 {
  background: rgb(0, 255, 255);
  border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="click_td">color</td>
    <td class="click_td">color 2</td>
  </tr>
</table>
<button class="click_btn style1">style1</button>
<button class="click_btn style2">style2</button>
2 голосов
/ 25 февраля 2020 
$('.click_btn').on('click', function(e) {
    e.preventDefault();
    style = $(this).attr('class');  //will return style1/style2
})
...