Показать сообщение отдельно
  #14 (permalink)  
Старый 16.06.2016, 19:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

armolov,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
       .select{
         background-color: #228B22;
       }

 </style>
 <script>
  window.addEventListener("DOMContentLoaded", function() {
    var trs = document.querySelectorAll("tr"),
        obj = {};
    [].forEach.call(trs, function(tr, i) {
        var user = tr.dataset.user
        obj[user] = 0;
        var tds = tr.querySelectorAll("td");
        var temp;
        [].forEach.call(tds, function(td, a) {
            var data = td.dataset.select;
            td.addEventListener("click", function() {
                if (temp == td) td.classList.toggle("select");
                else {
                    temp && temp.classList.remove("select");
                    temp = td;
                    td.classList.add("select")
                }
                obj[user] = td.classList.contains("select") ? data : 0;
                document.querySelector("p").innerHTML = JSON.stringify(obj);
            })
        })
    });
    document.querySelector("p").innerHTML = JSON.stringify(obj);
});
  </script>
</head>

<body>
<p></p>
<table>
<tr data-user="Петя">
<td  data-select="1">1</td>
<td  data-select="2">2</td>
<td  data-select="3">3</td>
</tr>
<tr data-user="Вася">
<td  data-select="1">1</td>
<td  data-select="2">2</td>
<td  data-select="3">3</td>
</tr>
</table>


</body>
</html>
Ответить с цитированием