13.10.2016, 07:51
|
|
Аспирант
|
|
Регистрация: 12.10.2016
Сообщений: 53
|
|
Нет абсолютно не сложно, вот код
<div class="product-list">
<!-- шапка таблицы строка-->
<div class="cat-head">
<div class="image head">Изображение</div>
<div class="name head">Наименование</div>
<div class="attribute head">Характеристики</div>
<div class="options head">Доп. опции</div>
<div class="price_constant head">Цена</div>
<div class="price head">Сумма</div>
<div class="quantity_cart head">Кол-во</div>
<div class="cart head"></div>
<div class="multicart head"><input type="checkbox" value="" /></div>
</div>
<div>
<!-- тело таблицы строка-->
<div class="image"><span ><img src=".png" alt=""/></span>
<a href=".."><img src=".." title=".." alt=".." /></a></div>
<div class="name"><a href="">..</a></div>
<div class="description">..</div>
<div class="attribute">..</div>
<div class="options">..</div>
<div class="quantity_cart">
<span class="minus" onclick="quantity(141, '-1', '50', '977')">-</span>
<input type="text" name="141" oninput="recalc(141);" size="2" value="50" maximum="977" />
<span class="plus" onclick="quantity(141, '+1', '50', '977')">+</span>
</div>
<div class="price_constant">
<span class="price-old">..</span> <span class="price-new">..</span>
</div>
<div class="multicart"><input type="checkbox" value="..." /></div>
<div class="cart">
<input type="button" value="Купить" onclick="addToCart('141', $(this).parent().parent().find('input[name^=141]').val());" class="button" />
</div>
</div>
<div>
<!-- тело таблицы строка 2-->
<div class="image"><span ><img src=".png" alt=""/></span>
<a href=".."><img src=".." title=".." alt=".." /></a></div>
<div class="name"><a href="">..</a></div>
<div class="description">..</div>
<div class="attribute">..</div>
<div class="options">..</div>
<div class="quantity_cart">
<span class="minus" onclick="quantity(142, '-1', '50', '977')">-</span>
<input type="text" name="142" oninput="recalc(142);" size="2" value="50" maximum="977" />
<span class="plus" onclick="quantity(142, '+1', '50', '977')">+</span>
</div>
<div class="price_constant">
<span class="price-old">..</span> <span class="price-new">..</span>
</div>
<div class="multicart"><input type="checkbox" value="..." /></div>
<div class="cart">
<input type="button" value="Купить" onclick="addToCart('142', $(this).parent().parent().find('input[name^=142]').val());" class="button" />
</div>
</div>
<!-- тело таблицы строка 3 и т.д -->
|
|
13.10.2016, 08:19
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
MixPetrov,
так и не понял у каких элементов вы хотите менять класс ... вариант пальцем в небо
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.mon {
background: green;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$('.multicart input[type="checkbox"]').on('click',function() {
$(this).parent().parent().toggleClass('mon');
})
});
</script>
</head>
<body>
<div class="product-list">
<!-- шапка таблицы строка-->
<div class="cat-head">
<div class="image head">Изображение</div>
<div class="name head">Наименование</div>
<div class="attribute head">Характеристики</div>
<div class="options head">Доп. опции</div>
<div class="price_constant head">Цена</div>
<div class="price head">Сумма</div>
<div class="quantity_cart head">Кол-во</div>
<div class="cart head"></div>
<div class="multicart head"><input type="checkbox" value="" /></div>
</div>
<div>
<!-- тело таблицы строка-->
<div class="image"><span ><img src=".png" alt=""/></span>
<a href=".."><img src=".." title=".." alt=".." /></a></div>
<div class="name"><a href="">..</a></div>
<div class="description">..</div>
<div class="attribute">..</div>
<div class="options">..</div>
<div class="quantity_cart">
<span class="minus" onclick="quantity(141, '-1', '50', '977')">-</span>
<input type="text" name="141" oninput="recalc(141);" size="2" value="50" maximum="977" />
<span class="plus" onclick="quantity(141, '+1', '50', '977')">+</span>
</div>
<div class="price_constant">
<span class="price-old">..</span> <span class="price-new">..</span>
</div>
<div class="multicart"><input type="checkbox" value="..." /></div>
<div class="cart">
<input type="button" value="Купить" onclick="addToCart('141', $(this).parent().parent().find('input[name^=141]').val());" class="button" />
</div>
</div>
<div>
<!-- тело таблицы строка 2-->
<div class="image"><span ><img src=".png" alt=""/></span>
<a href=".."><img src=".." title=".." alt=".." /></a></div>
<div class="name"><a href="">..</a></div>
<div class="description">..</div>
<div class="attribute">..</div>
<div class="options">..</div>
<div class="quantity_cart">
<span class="minus" onclick="quantity(142, '-1', '50', '977')">-</span>
<input type="text" name="142" oninput="recalc(142);" size="2" value="50" maximum="977" />
<span class="plus" onclick="quantity(142, '+1', '50', '977')">+</span>
</div>
<div class="price_constant">
<span class="price-old">..</span> <span class="price-new">..</span>
</div>
<div class="multicart"><input type="checkbox" value="..." /></div>
<div class="cart">
<input type="button" value="Купить" onclick="addToCart('142', $(this).parent().parent().find('input[name^=142]').val());" class="button" />
</div>
</div>
<!-- тело таблицы строка 3 и т.д -->
</body>
</html>
|
|
13.10.2016, 10:26
|
|
Аспирант
|
|
Регистрация: 12.10.2016
Сообщений: 53
|
|
|
А вот для общего развития: можно ли добавить в код изменение цвета фона не только в ячейке с чекбоксом, но и в других?
И еще вопрос (не обязательно, для понимания): Общий чекбокс который активирует чекбоксы таблицы меняет фон только в своей ячейке.
|
|
13.10.2016, 10:44
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от MixPetrov
|
|
А вот для общего развития: можно ли добавить в код изменение цвета фона не только в ячейке с чекбоксом, но и в других?
|
это решается через css .mon .name {} и т.д.
что такое ячейка, вы по прежнему скрываите как партизан.
|
Сообщение от MixPetrov
|
|
Общий чекбокс который активирует чекбоксы таблицы
|
что-ж вы раньше молчали?
чтобы на первый чекбокс навесить это, неплохо бы знать где он находится, предоставленный вами html это никак не проясняет. |
|
13.10.2016, 10:55
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
MixPetrov,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.mon .multicart{
background: green;
}
.mon .name{
border: #0000FF 2px solid;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var chec = $('.multicart input[type="checkbox"]'),first = chec.first();
chec = chec.not(first);
first.on('click',function() {
chec.prop({checked : !this.checked}).click()
})
chec.on('click',function() {
$(this).parent().parent().toggleClass('mon',this.checked);
})
});
</script>
</head>
<body>
<div class="product-list">
<!-- шапка таблицы строка-->
<div class="cat-head">
<div class="image head">Изображение</div>
<div class="name head">Наименование</div>
<div class="attribute head">Характеристики</div>
<div class="options head">Доп. опции</div>
<div class="price_constant head">Цена</div>
<div class="price head">Сумма</div>
<div class="quantity_cart head">Кол-во</div>
<div class="cart head"></div>
<div class="multicart head"><input type="checkbox" value="" /></div>
</div>
<div>
<!-- тело таблицы строка-->
<div class="image"><span ><img src=".png" alt=""/></span>
<a href=".."><img src=".." title=".." alt=".." /></a></div>
<div class="name"><a href="">..</a></div>
<div class="description">..</div>
<div class="attribute">..</div>
<div class="options">..</div>
<div class="quantity_cart">
<span class="minus" onclick="quantity(141, '-1', '50', '977')">-</span>
<input type="text" name="141" oninput="recalc(141);" size="2" value="50" maximum="977" />
<span class="plus" onclick="quantity(141, '+1', '50', '977')">+</span>
</div>
<div class="price_constant">
<span class="price-old">..</span> <span class="price-new">..</span>
</div>
<div class="multicart"><input type="checkbox" value="..." /></div>
<div class="cart">
<input type="button" value="Купить" onclick="addToCart('141', $(this).parent().parent().find('input[name^=141]').val());" class="button" />
</div>
</div>
<div>
<!-- тело таблицы строка 2-->
<div class="image"><span ><img src=".png" alt=""/></span>
<a href=".."><img src=".." title=".." alt=".." /></a></div>
<div class="name"><a href="">..</a></div>
<div class="description">..</div>
<div class="attribute">..</div>
<div class="options">..</div>
<div class="quantity_cart">
<span class="minus" onclick="quantity(142, '-1', '50', '977')">-</span>
<input type="text" name="142" oninput="recalc(142);" size="2" value="50" maximum="977" />
<span class="plus" onclick="quantity(142, '+1', '50', '977')">+</span>
</div>
<div class="price_constant">
<span class="price-old">..</span> <span class="price-new">..</span>
</div>
<div class="multicart"><input type="checkbox" value="..." /></div>
<div class="cart">
<input type="button" value="Купить" onclick="addToCart('142', $(this).parent().parent().find('input[name^=142]').val());" class="button" />
</div>
</div>
<!-- тело таблицы строка 3 и т.д -->
</body>
</html>
|
|
13.10.2016, 10:59
|
|
Аспирант
|
|
Регистрация: 12.10.2016
Сообщений: 53
|
|
что такое ячейка, вы по прежнему скрываите как партизан.
Ячейка таблицы в заголовоке формируется:
<div class="name head">Наименование</div>
Ячейка таблицы в строке формируется:
<div class="name"><a href="">..</a></div>
чтобы на первый чекбокс навесить это, неплохо бы знать где он находится, предоставленный вами html это никак не проясняет.
<div class="multicart head"><input type="checkbox" value="" /></div>
|
|
13.10.2016, 11:09
|
|
Аспирант
|
|
Регистрация: 12.10.2016
Сообщений: 53
|
|
На рисунке красным я выделил ячейки (кроме ячеек с чекбоксом) которые тоже б меняли цвет фона, а синим выделены ячейки для подписи их класса.  |
|
13.10.2016, 11:25
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
MixPetrov,
код в 15 посте устроил или нет?
|
|
13.10.2016, 11:30
|
|
Аспирант
|
|
Регистрация: 12.10.2016
Сообщений: 53
|
|
|
Более чем, Спасибо!
|
|
|
|
