Hướng dẫn how do i grey out a cell in html? - làm cách nào để tô xám một ô trong html?

Khi tôi cố gắng tạo các bảng HTML, tôi tự hỏi làm thế nào tôi có thể greyout các tế bào không bị xử lý.

Khi tôi nhấp vào ô ____ 10, kết quả mong muốn của tôi giống như bên dưới.

Tôi đã thử như mã bên dưới. Nếu có phương pháp tinh vi hơn cho greyout xin vui lòng cho tôi biết.

Cảm ơn

var $ = jQuery;
$('td').on('click', function(e) {
  e.preventDefault();
  $('table').toggleClass('greyout');
})

td {
  background-color: aqua;
  transition-duration: 0.5s;
  border: solid black 1px;
  padding: 5px;
}

table {
  border-collapse: collapse;
}

.greyout {
  opacity: 0.2;
  /* Real browsers */
}

  

    
1
    
2
    
3
  
  

    
4
    
5
    
6
  
  

    
7
    
8
    
9
  

Penny Liu

13.3k5 Huy hiệu vàng71 Huy hiệu bạc90 Huy hiệu Đồng5 gold badges71 silver badges90 bronze badges

Đã hỏi ngày 27 tháng 3 năm 2020 lúc 10:20Mar 27, 2020 at 10:20

0

Bạn cần áp dụng lớp cho tất cả các ô ngoại trừ mẫu được nhấp, vì vậy hãy sử dụng phương pháp

td {
  background-color: aqua;
  transition-duration: 0.5s;
  border: solid black 1px;
  padding: 5px;
}

table {
  border-collapse: collapse;
}

.greyout {
  opacity: 0.2;
  /* Real browsers */
}

2. Cũng lưu ý rằng để kích hoạt các nhấp chuột tiếp theo, bạn cần xóa lớp đó khỏi bất kỳ phần tử

td {
  background-color: aqua;
  transition-duration: 0.5s;
  border: solid black 1px;
  padding: 5px;
}

table {
  border-collapse: collapse;
}

.greyout {
  opacity: 0.2;
  /* Real browsers */
}

3 nào trước khi thêm nó vào tập tiếp theo.

Ngoài ra, lưu ý rằng

td {
  background-color: aqua;
  transition-duration: 0.5s;
  border: solid black 1px;
  padding: 5px;
}

table {
  border-collapse: collapse;
}

.greyout {
  opacity: 0.2;
  /* Real browsers */
}

4 là dự phòng trên

td {
  background-color: aqua;
  transition-duration: 0.5s;
  border: solid black 1px;
  padding: 5px;
}

table {
  border-collapse: collapse;
}

.greyout {
  opacity: 0.2;
  /* Real browsers */
}

3 Nhấp vào Handler vì không có hành động mặc định để ngăn chặn. Ngoài ra, nếu bạn muốn bí danh

td {
  background-color: aqua;
  transition-duration: 0.5s;
  border: solid black 1px;
  padding: 5px;
}

table {
  border-collapse: collapse;
}

.greyout {
  opacity: 0.2;
  /* Real browsers */
}

6 sử dụng đối số trong tài liệu.

Với tất cả những gì đã nói, hãy thử điều này:

jQuery($ => {
  let $td = $('td').on('click', function() {
    $td.removeClass('greyout').not(this).addClass('greyout');
  })
});

td {
  background-color: aqua;
  transition-duration: 0.5s;
  border: solid black 1px;
  padding: 5px;
}

table {
  border-collapse: collapse;
}

.greyout {
  opacity: 0.2;
}

  

    
1
    
2
    
3
  
  

    
4
    
5
    
6
  
  

    
7
    
8
    
9
  

Đã trả lời ngày 27 tháng 3 năm 2020 lúc 10:23Mar 27, 2020 at 10:23

Rory McCrossanrory McCrossanRory McCrossan

327K37 Huy hiệu vàng300 Huy hiệu bạc328 Huy hiệu Đồng37 gold badges300 silver badges328 bronze badges

1

Tôi sẽ đi theo logic sau:

$mainTable = $('table');
$mainTable.on('click', 'td', function(){
    if( this.classList.contains('selected') ){
        $(this).removeClass('selected')
    } else{
        $mainTable.find('.selected').removeClass('selected');
        $(this).addClass('selected')
    }

    $mainTable.toggleClass('withSelectedOption', $mainTable.find('.selected').length !== 0);
});

table td{
    background: aqua;
    padding: 10px;
}
table.withSelectedOption td{
    background: grey;
}
table.withSelectedOption td.selected{
    background: aqua;
}

  

    
1
2
3
  
  

    
4
5
6
  
  

    
7
8
9
  

Đã trả lời ngày 27 tháng 3 năm 2020 lúc 10:24Mar 27, 2020 at 10:24

MartijnmartijnMartijn

15,5K4 Huy hiệu vàng36 Huy hiệu bạc67 Huy hiệu Đồng4 gold badges36 silver badges67 bronze badges

0