Как переключить одну ячейку в многомерной таблице tr / td, используя jQuery? - PullRequest
Новая
       0

Как переключить одну ячейку в многомерной таблице tr / td, используя jQuery?

0 голосов
/ 30 мая 2020

Я хотел бы, чтобы была выбрана только одна ячейка во всей таблице. Хотя я не уверен, как применить logi c ко всем строкам сразу, поскольку мой код работает только на уровне одной строки.

Желаемый результат - отменить выбор предыдущей ячейки, как только будет нажата другая . 

$("#cube_power_grid").on("click", "td", function () {   

    $(this).parent().find("td").removeClass("selected_power");
    $(this).addClass("selected_power");

});
#cube_power_grid {
    width: 30vw;
    font-family: Varela Round;
    box-shadow: 0px 0px 6px 2px rgb(137, 57, 210);
}

#cube_power_grid tr {
    text-align: center;
    height: 10vh;
}

#cube_power_grid td {
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    background: linear-gradient(126deg, rgba(143,61,217,1) 12%, rgba(109,35,177,1) 43%, rgb(101, 34, 162) 72%);
    color: #FFF;
}

#cube_power_grid td:hover {
    background: #FFF;
    color: #712870;
    box-shadow: 0px 0px 6px 2px rgb(137, 57, 210);
}

.selected_power {
    background: #FFF !important;
    color: #712870 !important;
    box-shadow: 0px 0px 6px 2px rgb(137, 57, 210) !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>

        <table id="cube_power_grid">
          <tr>
            <td>3</td>
            <td>5</td>
            <td>8</td>
          </tr>
          <tr>
            <td>10</td>
            <td>12</td>
            <td>15</td>
          </tr>
          <tr>
            <td>20</td>
            <td>25</td>
            <td>30</td>
          </tr>
        </table>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 30 мая 2020

Вы можете удалить выбранный класс из всех других ячеек в таблице, кроме ячейки с щелчком, когда щелкнули любую ячейку, а также переключить класс при щелчке ячейки. 

$("#cube_power_grid").on("click", "td", function() {
  $(this).parents('table').find('td').not(this).removeClass('selected_power')
  $(this).toggleClass('selected_power')
});
#cube_power_grid {
  width: 30vw;
  font-family: Varela Round;
  box-shadow: 0px 0px 6px 2px rgb(137, 57, 210);
}

#cube_power_grid tr {
  text-align: center;
  height: 10vh;
}

#cube_power_grid td {
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
  background: linear-gradient(126deg, rgba(143, 61, 217, 1) 12%, rgba(109, 35, 177, 1) 43%, rgb(101, 34, 162) 72%);
  color: #FFF;
}

#cube_power_grid td:hover {
  background: #FFF;
  color: #712870;
  box-shadow: 0px 0px 6px 2px rgb(137, 57, 210);
}

.selected_power {
  background: #FFF !important;
  color: #712870 !important;
  box-shadow: 0px 0px 6px 2px rgb(137, 57, 210) !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="cube_power_grid">
  <tr>
    <td>3</td>
    <td>5</td>
    <td>8</td>
  </tr>
  <tr>
    <td>10</td>
    <td>12</td>
    <td>15</td>
  </tr>
  <tr>
    <td>20</td>
    <td>25</td>
    <td>30</td>
  </tr>
</table>
1 голос
/ 30 мая 2020

Вы можете попробовать найти все tds в таблице, используя closest('table'): 

$("#cube_power_grid").on("click", "td", function () {  
  $(this).closest('table').find("td").removeClass("selected_power");
  $(this).addClass("selected_power");
});
#cube_power_grid {
    width: 30vw;
    font-family: Varela Round;
    box-shadow: 0px 0px 6px 2px rgb(137, 57, 210);
}

#cube_power_grid tr {
    text-align: center;
    height: 10vh;
}

#cube_power_grid td {
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    background: linear-gradient(126deg, rgba(143,61,217,1) 12%, rgba(109,35,177,1) 43%, rgb(101, 34, 162) 72%);
    color: #FFF;
}

#cube_power_grid td:hover {
    background: #FFF;
    color: #712870;
    box-shadow: 0px 0px 6px 2px rgb(137, 57, 210);
}

.selected_power {
    background: #FFF !important;
    color: #712870 !important;
    box-shadow: 0px 0px 6px 2px rgb(137, 57, 210) !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="cube_power_grid">
  <tr>
    <td>3</td>
    <td>5</td>
    <td>8</td>
  </tr>
  <tr>
    <td>10</td>
    <td>12</td>
    <td>15</td>
  </tr>
  <tr>
    <td>20</td>
    <td>25</td>
    <td>30</td>
  </tr>
</table>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...