0

Необходимо, чтобы при нажатии на любую ячейку таблицы происходила смена background-color. При этом в других ячейках, в которых уже была смена background-color должно восстанавливаться его оригинальное значение. То есть, если нажать на первую ячейку, то в ней должен стать красный background-color, а во второй и третьей ячейках должен стать синий цвет и так для каждой ячейки.

Как это можно сделать?

function func(obj_id) {
  var elem = document.getElementById(obj_id);
  elem.style.backgroundColor = 'red';
};
#static_button {
  background-position: 30px;
  background-repeat: no-repeat;
  background-color: #0D4585;
  width: 200px;
  text-align: center;
  font-size: 13pt;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  padding: 0px 17px;
  border: 1px solid #265791;
}

#static_button:hover {
  background-color: #002c5e;
}

#static_button:focus {
  background-color: white;
}

.title_column_static {
  font-size: 10pt;
  color: #ffffff;
  text-align: center;
}
<table border="1" style="border-collapse: inherit;" onload="cell_count();">
  <tr>
    <td id="static_button" onclick="func(this.id);">
      <p class="title_column_static">Totale</p>
      <p class="number_pending_interview_static text-center" id="total_selected">0</p>
    </td>
    <td id="static_button" onclick="func(this.id);">
      <p class="title_column_static">Attesa</p>
      <p class="number_pending_interview_static text-center">0</p>
    </td>
    <td id="static_button" onclick="func(this.id);">
      <p class="title_column_static">Completati</p>
      <p class="number_pending_interview_static text-center">0</p>
    </td>
    <!--</div>-->
    <!--</td>-->
  </tr>
  <!--</a>-->
</table>

3 ответа 3

3
  1. id у каждого элемента должен быть уникальный!
  2. Вам нужно получить все td в таблице, затем вернуть им синий цвет и текущему td поставить красный цвет:

function func(obj) {
  var nodes = document.querySelectorAll('td');
  [].forEach.call(nodes, function(el) {
    el.style.backgroundColor = '#0D4585';
  });
  obj.style.backgroundColor = 'red';
};
#static_button {
  background-position: 30px;
  background-repeat: no-repeat;
  background-color: #0D4585;
  width: 200px;
  text-align: center;
  font-size: 13pt;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  padding: 0px 17px;
  border: 1px solid #265791;
}

#static_button:hover {
  background-color: #002c5e;
}

#static_button:focus {
  background-color: white;
}

.title_column_static {
  font-size: 10pt;
  color: #ffffff;
  text-align: center;
}
<table border="1" style="border-collapse: inherit;" onload="cell_count();">
  <tr>
    <td id="static_button" onclick="func(this);">
      <p class="title_column_static">Totale</p>
      <p class="number_pending_interview_static text-center" id="total_selected">0</p>
    </td>
    <td id="static_button" onclick="func(this);">
      <p class="title_column_static">Attesa</p>
      <p class="number_pending_interview_static text-center">0</p>
    </td>
    <td id="static_button" onclick="func(this);">
      <p class="title_column_static">Completati</p>
      <p class="number_pending_interview_static text-center">0</p>
    </td>
    <!-- лишний код
    </div>
    </td>
    -->
  </tr>
  <!-- лишний код
  </a>
  -->
</table>


UPD: вариант работы функции при котором смена background-color происходит только в таблице родителе td:

function func(obj) {
  var parent_obj = obj.closest("table");
  var nodes = parent_obj.querySelectorAll('td');
  [].forEach.call(nodes, function(el) {
    el.style.backgroundColor = '#0D4585';
  });
  obj.style.backgroundColor = 'red';
};
.other_table{
  width:400px;
  height:40px;
  background-color: #BFD0FF;
}


#static_button {
  background-position: 30px;
  background-repeat: no-repeat;
  background-color: #0D4585;
  width: 200px;
  text-align: center;
  font-size: 13pt;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  padding: 0px 17px;
  border: 1px solid #265791;
}

#static_button:hover {
  background-color: #002c5e;
}

#static_button:focus {
  background-color: white;
}

.title_column_static {
  font-size: 10pt;
  color: #ffffff;
  text-align: center;
}
<table class="other_table">
  <tr>
    <td>test table</td>
  </tr>
</table>

<table border="1" style="border-collapse: inherit;" onload="cell_count();">
  <tr>
    <td id="static_button" onclick="func(this);">
      <p class="title_column_static">Totale</p>
      <p class="number_pending_interview_static text-center" id="total_selected">0</p>
    </td>
    <td id="static_button" onclick="func(this);">
      <p class="title_column_static">Attesa</p>
      <p class="number_pending_interview_static text-center">0</p>
    </td>
    <td id="static_button" onclick="func(this);">
      <p class="title_column_static">Completati</p>
      <p class="number_pending_interview_static text-center">0</p>
    </td>
    <!-- лишний код
    </div>
    </td>
    -->
  </tr>
  <!-- лишний код
  </a>
  -->
</table>

6
  • Спасибо большое за объяснения! 23 окт 2017 в 19:49
  • Интересует вопрос: возможно ли сделать так, что бы он не все <td> брал, а именно данный? 23 окт 2017 в 22:49
  • @OlegSevernuy данный td он и так берет: obj.style.backgroundColor = 'red';. Уточните пожалуйста, Вы имеете ввиду, чтобы он брал td только из определенной таблицы или иное ?
    – Alex
    23 окт 2017 в 22:51
  • да, что бы он не трогал другие <td>, это возможно реализовать? конкретно только для данного <table>. Сейчас столкнулся с проблемой, что когда использую данный код, он трогает header который так же состоит из <td>. Хотел бы узнать, существуют ли способы воздействия именно на <td> который находиться в таблице? 23 окт 2017 в 22:59
  • @OlegSevernuy Вам нужно изменить только document.querySelectorAll на parent_obj.querySelectorAll, где parent_obj - это родитель текущего объекта (таблица). Таким образом выборка будет идти уже не из всего dom, а из текущей table. Добавили вариант в ответ.
    – Alex
    23 окт 2017 в 23:12
2

Привет, id должен быть уникальным для всего документа. Дальше, по сути id тебе не нужен. Достаточно использовать класс, единый для всех ячеек. При клике можно присваивать всем элементам базовый цвет, за исключением элемента по которому кликают. А на элемент, по которому кликают, можно применить element.classList.toggle("red"); Посмотри в консоли this для элемента td. смотри фиддл

function initListener(){
    getCells().forEach(el => el.addEventListener('click',toggleColor));
}
function toggleColor() {
  setBaseColor(this);
  this.classList.toggle("red"); 
};
function setBaseColor(currentCell){
    filteredCells = getCells().filter(el => el.classList.contains('red'));
    filteredCells.forEach(cell => {
    if(cell.cellIndex !== currentCell.cellIndex) cell.classList.remove('red');
  })
};
function getCells(){
    return Array.from(document.getElementsByClassName("static_button"));
};
initListener();
1
  • Спасибо большое за объяснение! 23 окт 2017 в 21:38
1

Уникальный id для каждой кнопки. А класс - один. По классу назначаем общий стиль (как вы делали для id). А с помощью js получаем все кнопки с этим классом и для каждой в цикле сбрасываем цвет на стандартный. А потом выделяем нажатую.

function func(obj_id) {
  var elem = document.getElementById(obj_id);
  var x = document.getElementsByClassName("btn");
  for (var z = 0; z < x.length; z++) {
    x[z].style.backgroundColor = '#0D4585';
  }
  elem.style.backgroundColor = 'red';

};
.btn {
  background-position: 30px;
  background-repeat: no-repeat;
  background-color: #0D4585;
  width: 200px;
  text-align: center;
  font-size: 13pt;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  padding: 0px 17px;
  border: 1px solid #265791;
}

.btn:hover {
  background-color: #002c5e;
}

.btn:focus {
  background-color: white;
}

.title_column_static {
  font-size: 10pt;
  color: #ffffff;
  text-align: center;
}
<table border="1" style="border-collapse: inherit;" onload="cell_count();">
  <tr>
    <td id="static_button" class='btn' onclick="func(this.id);">
      <p class="title_column_static">Totale</p>
      <p class="number_pending_interview_static text-center" id="total_selected">0</p>
    </td>
    <td id="static_button2" class='btn' onclick="func(this.id);">
      <p class="title_column_static">Attesa</p>
      <p class="number_pending_interview_static text-center">0</p>
    </td>
    <td id="static_button3" class='btn' onclick="func(this.id);">
      <p class="title_column_static">Completati</p>
      <p class="number_pending_interview_static text-center">0</p>
    </td>
    </div>
    </td>
  </tr>

  </a>

</table>

1
  • Спасибо большое! Разобрался. 23 окт 2017 в 19:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.