1

Есть таблица из div тегов.

Как изменить фон только одной строки при клике на строку?

.rels-right-block{display:block;}	
	.valfirst{height:20px; width:20px; text-align:center;  float:left;}
	.valexp_numb{height:20px; width:150px; text-align:center; padding:1px 0; float:left;}
		.valexp_numb .exp1{height:20px; width:50px; float:left;}
		.valexp_numb .exp2{height:20px; width:50px; float:right;}	
	.exp_numb{height:29px; padding:3px 0; float:left;}
	.point_dest{height:29px; padding:3px 0; float:left;}
	.valpoint_dest{height:20px; width:200px; text-align:left; text-transform:uppercase;  border:1px solid #666666; padding:2px 0 0 6px;}
<div class="rels-right-block">
<div class="vals">

	<div class="listRel">
		<div class="valfirst">-</div>
		<div class="valexp_numb"><div class='exp1'>1</div>-<div class='exp2'>2</div></div>
		<div class="valpoint_dest">3er</div>
	</div>
	
	<div class="listRel">
		<div class="valfirst">-</div>
		<div class="valexp_numb"><div class='exp1'>66</div>-<div class='exp2'>34</div></div>
		<div class="valpoint_dest">ert</div>
	</div>
	
	<div class="listRel">
		<div class="valfirst">-</div>
		<div class="valexp_numb"><div class='exp1'>113</div>-<div class='exp2'>gg</div></div>
		<div class="valpoint_dest">12</div>
	</div>
	
	<div class="listRel">
		<div class="valfirst">-</div>
		<div class="valexp_numb"><div class='exp1'>hik</div>-<div class='exp2'>www</div></div>
		<div class="valpoint_dest">123</div>
	</div>
	
</div>
</div>

5
  • при клике на что?
    – MasterAlex
    17 дек 2016 в 9:21
  • @MasterAlex при клике на строку
    – Xfirab
    17 дек 2016 в 9:24
  • У кого нибудь есть варианты
    – Xfirab
    17 дек 2016 в 9:29
  • @Xfirab, сейчас напишу
    – Yuri
    17 дек 2016 в 9:29
  • 2
    jsfiddle.net/ghmy23w8
    – soledar10
    17 дек 2016 в 9:31

3 ответа 3

2

$(function() {
  $('.listRel').click(function() {
    $('.listRel').removeClass('color');
    $(this).addClass('color');
  });
});
.rels-right-block{display:block;}	
.valfirst{height:20px; width:20px; text-align:center;  float:left;}
.valexp_numb{height:20px; width:150px; text-align:center; padding:1px 0; float:left;}
.valexp_numb .exp1{height:20px; width:50px; float:left;}
.valexp_numb .exp2{height:20px; width:50px; float:right;}	
.exp_numb{height:29px; padding:3px 0; float:left;}
.point_dest{height:29px; padding:3px 0; float:left;}
.valpoint_dest{height:20px; width:200px; text-align:left; text-transform:uppercase;  border:1px solid #666666; padding:2px 0 0 6px;}
.color {background-color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="rels-right-block">
<div class="vals">

	<div class="listRel">
		<div class="valfirst">-</div>
		<div class="valexp_numb"><div class='exp1'>1</div>-<div class='exp2'>2</div></div>
		<div class="valpoint_dest">3er</div>
	</div>
	
	<div class="listRel">
		<div class="valfirst">-</div>
		<div class="valexp_numb"><div class='exp1'>66</div>-<div class='exp2'>34</div></div>
		<div class="valpoint_dest">ert</div>
	</div>
	
	<div class="listRel">
		<div class="valfirst">-</div>
		<div class="valexp_numb"><div class='exp1'>113</div>-<div class='exp2'>gg</div></div>
		<div class="valpoint_dest">12</div>
	</div>
	
	<div class="listRel">
		<div class="valfirst">-</div>
		<div class="valexp_numb"><div class='exp1'>hik</div>-<div class='exp2'>www</div></div>
		<div class="valpoint_dest">123</div>
	</div>
</div>
</div>

2

Вариант на javascript

Fiddle

var classSelector,
  classElements,
  startActive;

classSelector = '.listRel';

classElements = document.querySelectorAll(classSelector);

startActive = function() {
  for (var i = 0; i < classElements.length; i++) {
    classElements[i].classList.remove('listRel-current');
  }
  this.classList.add('listRel-current');
};

for (var i = 0; i < classElements.length; i++) {
  classElements[i].addEventListener('mousedown', startActive);
}
.rels-right-block {
  display: block;
}
.valfirst {
  height: 20px;
  width: 20px;
  text-align: center;
  float: left;
}
.valexp_numb {
  height: 20px;
  width: 150px;
  text-align: center;
  padding: 1px 0;
  float: left;
}
.valexp_numb .exp1 {
  height: 20px;
  width: 50px;
  float: left;
}
.valexp_numb .exp2 {
  height: 20px;
  width: 50px;
  float: right;
}
.exp_numb {
  height: 29px;
  padding: 3px 0;
  float: left;
}
.point_dest {
  height: 29px;
  padding: 3px 0;
  float: left;
}
.valpoint_dest {
  height: 20px;
  width: 210px;
  text-align: left;
  text-transform: uppercase;
  border: 1px solid #666666;
  padding: 2px 0 0 0;
  box-sizing: border-box;
}
.listRel {
  clear: both;
  max-width: 210px;
}
.listRel-current {
  background: tomato;
  color: #fff;
}
<div class="rels-right-block">
  <div class="vals">

    <div class="listRel">
      <div class="valfirst">-</div>
      <div class="valexp_numb">
        <div class='exp1'>1</div>-
        <div class='exp2'>2</div>
      </div>
      <div class="valpoint_dest">3er</div>
    </div>

    <div class="listRel">
      <div class="valfirst">-</div>
      <div class="valexp_numb">
        <div class='exp1'>66</div>-
        <div class='exp2'>34</div>
      </div>
      <div class="valpoint_dest">ert</div>
    </div>

    <div class="listRel">
      <div class="valfirst">-</div>
      <div class="valexp_numb">
        <div class='exp1'>113</div>-
        <div class='exp2'>gg</div>
      </div>
      <div class="valpoint_dest">12</div>
    </div>

    <div class="listRel">
      <div class="valfirst">-</div>
      <div class="valexp_numb">
        <div class='exp1'>hik</div>-
        <div class='exp2'>www</div>
      </div>
      <div class="valpoint_dest">123</div>
    </div>

  </div>
</div>

0

Попробуйте и моё решение:

(function() {
  var blocks = document.querySelectorAll(".block");

  for(var i = 0; i < blocks.length; i++) {
    blocks[i].addEventListener("click", function() {
      for(var j = 0; j < blocks.length; j++) {
        blocks[j].classList.remove("active");
      }

      this.classList.add("active");
    }, false);
  }
})();
.block {
  width: 260px;
  border: 1px solid gray;
  margin: 5px 0px;
}

.block:last-child {
  margin: 0px;
}

.block div {
  cursor: pointer;
  display: inline-block;
  width: 70px;
  border-right: 1px solid gray;
  text-align: center;
  padding: 5px;
}

.block.active {
  background-color: orange;
}

.block div:last-child {
  border: none;
}
<div class="container">
  <div class="block">
    <div class="name">
      John
    </div>
    <div class="surname">
      Sleiden
    </div>
    <div class="born">
      1985.12.12
    </div>
  </div>

  <br />

  <div class="block">
    <div class="name">
      Ben
    </div>
    <div class="surname">
      Stuart
    </div>
    <div class="born">
      1976.12.12
    </div>
  </div>
</div>

1
  • Спасибо попробую
    – Xfirab
    17 дек 2016 в 12:16

Ваш ответ

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

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