|
как запустить addEventListener в зависимости от выбранной радиокнопки
Всем привет!
Помогите с решением!!! Есть скрипт:
function myFunc (e)
{
var evt = window.event || e,
obj = evt.srcElement || evt.target;
if (obj.tagName == 'TABLE') return;
while (obj.tagName != 'TD') obj = obj.parentNode;
obj.className = obj.className ? '' : 'act';
}
onload = function ()
{
var trg = document.getElementById ('myTBL');
if (document.addEventListener) trg.addEventListener ('click', myFunc);
else if (document.attachEvent) trg.attachEvent ('onclick', myFunc);
else trg.onclick = myFunc;
}
Есть несколько стилей: <style> #myTBL td.act { font:14px helvetica, arial, sans-serif; color : White; font-weight:800; background-color:darkGreen; } </style> <style> #myTBL1 td.act { font:14px helvetica, arial, sans-serif; color : #ccc; font-weight:800; background-color:RED; } </style> <style> #myTBL2 td.act { font:14px helvetica, arial, sans-serif; color : #666; font-weight:800; background-color:RED; } </style> Есть таблица в которой всё это должно работать и радиокнопки для назначения стиля который должна принимать ячейка: <body> <input type="radio" id="DarkGreen" name="COLOR" value="" onclick = function() { myTBL; }> <label for="DarkGreen">DarkGreen</label> <input type="radio" id="RED" name="COLOR" value="" onclick = function() { myTBL1; }> <label for="RED">RED</label> <input type="radio" id="Orange" name="COLOR" value="" onclick = function() { myTBL2; }> <label for="Orange">Orange</label> <table width="100%" height="100%" id="myTBL" class="select"> <tr> <td class="oAK" bgcolor="PaleGoldenrod"> AK </td> <td class="aKK" bgcolor="#BEBEBE"> KK </td> <td class="sKQ" bgcolor="PaleGreen"> KQ </td> <td class="sKJ" bgcolor="PaleGreen"> KJ </td> <td class="sKT" bgcolor="PaleGreen"> KT </td> </tr> <tr> <td class="oAQ" bgcolor="PaleGoldenrod"> AQ </td> <td class="oKQ" bgcolor="PaleGoldenrod"> KQ </td> <td class="aQQ" bgcolor="PaleGoldenrod"> </td> <td class="sQJ" bgcolor="PaleGreen"> QJ </td> <td class="sQT" bgcolor="PaleGreen"> QT </td> </tr> <tr> <td class="oAJ" bgcolor="PaleGoldenrod"> AJ </td> <td class="oKJ" bgcolor="PaleGoldenrod"> KJ </td> <td class="oQJ" bgcolor="PaleGoldenrod"> QJ </td> <td class="aJJ" bgcolor="#BEBEBE"> JJ </td> <td class="sJT" bgcolor="PaleGreen"> JT </td> </tr> </table> </body> Вопрос - КАК СДЕЛАТЬ ЧТОБЫ ОНКЛИК В ФУНКЦИИ ИСПОЛЬЗОВАЛ СТИЛЬ ВЫБРАННЫЙ РАДИОКНОПКОЙ!!! ПОМОГИТЕ ....... |
konart,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#myTBL td.DarkGreen
{
font:14px helvetica, arial, sans-serif;
color : White;
font-weight:800;
background-color:DarkGreen;
}
#myTBL td.Red
{
font:14px helvetica, arial, sans-serif;
color : #ccc;
font-weight:800;
background-color:Red;
}
#myTBL td.Orange
{
font:14px helvetica, arial, sans-serif;
color : #666;
font-weight:800;
background-color:Orange;
}
td{
height: 70px;
position: relative;
}
#myTBL td:hover:after {
background-color: #D2691E;
border-radius: 6px;
padding: 8px;
opacity: 1;
}
td.DarkGreen:after{ opacity:0;
content: "это DarkGreen";
position: absolute;
left: 70px;
}
td.Red:after{ opacity:0;
content: "это Red";
position: absolute;
left: 70px;
}
td.Orange:after{ opacity:0;
content: "это Orange";
position: absolute;
left: 70px;
}
</style>
<script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>
<script>
window.addEventListener('DOMContentLoaded', function() {
var table = document.querySelector('#myTBL'),
color = document.querySelectorAll('[name="COLOR"]');
table.addEventListener('click', function() {
var target = event.target;
if (target.closest("td")) {
[].forEach.call( color, function(el) {
el.checked && !target.classList.contains(el.id)? target.classList.add(el.id) : target.classList.remove(el.id);
});
}
});
});
</script>
</head>
<body>
<input type="radio" id="DarkGreen" name="COLOR" value="" checked="checked">
<label for="DarkGreen">DarkGreen</label>
<input type="radio" id="Red" name="COLOR" value="" >
<label for="Red">RED</label>
<input type="radio" id="Orange" name="COLOR" value="">
<label for="Orange">Orange</label>
<table width="100%" height="100%" id="myTBL" class="select">
<tr>
<td class="oAK" bgcolor="PaleGoldenrod">
AK
</td>
<td class="aKK" bgcolor="#BEBEBE">
KK
</td>
<td class="sKQ" bgcolor="PaleGreen">
KQ
</td>
<td class="sKJ" bgcolor="PaleGreen">
KJ
</td>
<td class="sKT" bgcolor="PaleGreen">
KT
</td>
</tr>
<tr>
<td class="oAQ" bgcolor="PaleGoldenrod">
AQ
</td>
<td class="oKQ" bgcolor="PaleGoldenrod">
KQ
</td>
<td class="aQQ" bgcolor="PaleGoldenrod">
QQ
</td>
<td class="sQJ" bgcolor="PaleGreen">
QJ
</td>
<td class="sQT" bgcolor="PaleGreen">
QT
</td>
</tr>
<tr>
<td class="oAJ" bgcolor="PaleGoldenrod">
AJ
</td>
<td class="oKJ" bgcolor="PaleGoldenrod">
KJ
</td>
<td class="oQJ" bgcolor="PaleGoldenrod">
QJ
</td>
<td class="aJJ" bgcolor="#BEBEBE">
JJ
</td>
<td class="sJT" bgcolor="PaleGreen">
JT
</td>
</tr>
</table>
</body>
</html>
|
:dance:
Большое спасибо!!! Быстро и без лишних слов!!!! Весьма благодарен! |
В развитие темы.
Можно ли на каждый цвет навесить подсказку (title) или что-то в этом роде. То есть чтобы все отмеченные одним цветом имели одну ОБЩУЮ подсказку (подсказка 1), отмеченные другим - другую (подсказка 2) и так далее? |
Цитата:
|
Вы имеете ввиду content: "это Orange"; ??? Я имел ввиду несколько другое. Когда ячейки закрашены то при подведении курсора к "красным" должна появляться подсказка "вы все в красном", при курсоре на ячейках с зелёным цветом - появляется подсказка "вы все зелёные". Контент я вижу, а вот в табличке подсказки не появляются!?
|
konart,
здесь есть надпись при наведении, после клика? если есть то меняйте надписи как вам нужно. |
Да, всё есть. Моя оплошность, не там смотрел. Ещё раз огромное СПАСИБО!!!
|
Поля форм не обязательно должны появляться внутри тега . Их можно разместить в любом месте страницы. Информацию из таких полей нельзя передавать на сервер (это возможно только для всей формы целиком), но когда мы делаем поля, которые обрабатывает JavaScript, нам обычно и не нужно передавать информацию из полей через submit.
<p><input type="text" value="abc"> (text)</p> <p><input type="password" value="abc"> (password)</p> <p><input type="checkbox" checked> (checkbox)</p> <p><input type="radio" value="A" name="choice"> <input type="radio" value="B" name="choice" checked> <input type="radio" value="C" name="choice"> (radio)</p> <p><input type="file" checked> (file)</p> |
Всем добрый день.
Здесь же появилась проблемка с которой мне не удаётся справиться, а именно: для красоты я добавил объём и тень в #myTBL и теперь подсказки оказались под закрашиваемой ячейкой. Причём подсказка сверху ячейки которую я закрашиваю первой, но ПОД всеми остальными. Пробовал и разные z-index, не забывал и про особенности с opacity, и то что позиционирование должно быть, но результата так и не добился. Вот коды...
#myTBL td.DarkGreen
{
font:14px helvetica, arial, sans-serif;
color : White;
font-weight:800;
background-color:DarkGreen;
background: linear-gradient(180deg, DarkGreen 95%, Black 5%);
box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7);
border-radius: 5px 5px; -webkit-border-radius: 5px;
z-index: 1;
opacity:0.99;
}
td{
height: auto;/*23*/
position: relative;
cursor: url('images/cursor-question.png'), url('images/861313825289482149.png'), pointer;
opacity:0.99;
}
#myTBL td:hover:after {
background-color: Lime; /*стиль подсказки*/
font:14px helvetica, arial, sans-serif;
color : Black;
font-weight:400;
border-radius: 1px;
padding: 2px;/*8*/
opacity: 0.99;/*1*/
border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -webkit-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7); -moz-box-shadow: 0.4em 0.4em 5px rgba(122,122,122,0.7);
z-index: 10;
position: fixed;
}
td.DarkGreen:after{
opacity:0;
content: "ALLIN";
position: fixed;
rigth: 50px;
bottom: 20px;
}
|
| Часовой пояс GMT +3, время: 22:14. |
|