Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   События по клике (https://javascript.ru/forum/dom-window/67969-sobytiya-po-klike.html)

рони 18.03.2017 20:46

Sav2907,
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style>
.table{
border-collapse: collapse;
}
.table td{
border: 1px solid #000;
padding: 10 10;
}
.check{
background: green;
}
.click{
cursor: pointer;
}
</style>
<table class="table">
  <tr><td colspan="6" align="center" class="abc">1-12</td></tr>
  <tr>
    <td rowspan="3">1.</td>
    <td class="click">01</td>
    <td class="click">02</td>
    <td class="click">03</td>
    <td class="click">04</td>
    <td rowspan="3"><select class="num" disabled><option value=""></option><option value="10">10</option><option value="20">20</option><option value="30">30</option></select></td>
  </tr>
  <tr>
    <td class="click">05</td>
    <td class="click">06</td>
    <td class="click">07</td>
    <td class="click">08</td>
  </tr>
  <tr>
    <td class="click">09</td>
    <td class="click">10</td>
    <td class="click">11</td>
    <td class="click">12</td>
  </tr>
  <tr><td colspan="6" align="center" class="abc">13-24</td></tr>
  <tr>
    <td rowspan="3">2.</td>
    <td class="click">13</td>
    <td class="click">14</td>
    <td class="click">15</td>
    <td class="click">16</td>
    <td rowspan="3"><select class="num" disabled><option value=""></option><option value="10">10</option><option value="20">20</option><option value="30">30</option></select></td>
  </tr>
  <tr>
    <td class="click">17</td>
    <td class="click">18</td>
    <td class="click">19</td>
    <td class="click">20</td>
  </tr>
  <tr>
    <td class="click">21</td>
    <td class="click">22</td>
    <td class="click">23</td>
    <td class="click">24</td>
  </tr>
</table>
<script>
var tr = $(".table tbody tr");
$(".num").each(function(indx, sel) {
var cl = $(".click", tr.slice(indx * 4, indx * 4 + 4)).on("click", function() {
        if(sel.value) return;
        alert($("td", tr.eq(indx * 4)).attr("class"));
        $(this).toggleClass("check");
        var disabled = !cl.is(".check");
        $(sel).prop("disabled", disabled);
    })
$(sel).on("change", function() {
  !sel.value && cl.removeClass("check") && $(sel).prop("disabled", true);
})

});
</script>

Sav2907 18.03.2017 20:50

Нужно $('.abc').html();

рони 18.03.2017 20:53

Sav2907,
а голову включить?
alert($(".abc", tr.eq(indx * 4)).html());

Sav2907 18.03.2017 20:55

рони,
Спасибо вы лучший. Mission completed

Sav2907 23.03.2017 21:45

рони,
можете дополнить ваш код, если все числа в блоке имеют класс ".check" тогда alert('all_checked');

рони 23.03.2017 21:57

Sav2907,
в конец строки 67
if(cl.length == cl.filter(".check").length)      alert('all_checked');

Sav2907 23.03.2017 22:01

Цитата:

Сообщение от рони (Сообщение 448290)
Sav2907,
в конец строки 67
if(cl.length == cl.filter(".check").length)      alert('all_checked');

Спасибо большое!


Часовой пояс GMT +3, время: 02:20.