Тема: как обратьтися к элементам не по ID ?
Показать сообщение отдельно
  #24 (permalink)  
Старый 26.02.2017, 19:59
Аватар для JAMLIGHT
Аспирант
Отправить личное сообщение для JAMLIGHT Посмотреть профиль Найти все сообщения от JAMLIGHT 		 
Регистрация: 23.01.2017
Сообщений: 80

возможно ли в этом коде привязать смену бэкграунда ячеек шапки к событию показа строк так чтобы при заполненном фильтре цвет не менялся без скрытия/раскрытия? 
<!DOCTYPE html>

<html lang="En">

<head>

  <title>Table</title>

  <meta charset="utf-8">
  
  <style type="text/css">
  
     #myTable tbody tr {

       display: none; }
  
  </style>
 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script src="http://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
  
  

  <script>

$(function() {

    $("#myTable").DataTable({

        "paging": false,

        

        "info": false

    });

    $("#myTable").find("[data-box]").on("click", function() {

        var cls = "." + $(this).data("box");

        $(cls).toggle()

    })

});

  </script>
  
   <script>

function ChangeColor(Element) {

if (Element.style.backgroundColor == 'green') Element.style.backgroundColor = 'red';

else Element.style.backgroundColor = 'green';

return false;

}

</script>

</head>



<body>

<table id="myTable" class="display">

        <thead>

            <tr>

                <th colspan="6">

                <table><thead><tr>



<td data-box="as1"style="background-color: green;" onclick="return ChangeColor(this);">1</td>

<td data-box="as2"style="background-color: green;" onclick="return ChangeColor(this);">2</td>

<td data-box="as3"style="background-color: green;" onclick="return ChangeColor(this);">3</td>

<td data-box="as4"style="background-color: green;" onclick="return ChangeColor(this);">4</td>

<td data-box="as5"style="background-color: green;" onclick="return ChangeColor(this);">5</td>

<td data-box="as6"style="background-color: green;" onclick="return ChangeColor(this);">6</td>

                </tr></thead></table>

                </th>

            </tr>

            <tr>

                <th>Name</th>

                <th>Position</th>

                <th>Office</th>

                <th>Age</th>

                <th>Start date</th>

                <th>Salary</th>

            </tr>

        </thead>
    
        <tbody>
        
            <tr class="as0" >

                <th></th>

                <th>Position</th>

                <th>Office</th>

                <th>Age</th>

                <th>Start date</th>

                <th>Salary</th>

            </tr>

    
            <tr class="as1" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

                <th>2011/04/25</th>

                <th>$320,800</th>

            </tr>

            <tr class="as1" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

                <th>2011/04/25</th>

                <th>$320,800</th>

            </tr>

            <tr class="as1" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

                <th>2011/04/25</th>

                <th>$320,800</th>

            </tr>

            <tr class="as1" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

                <th>2011/04/25</th>

                <th>$320,800</th>

            </tr>

            <tr class="as2" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

                <th>2011/04/25</th>

                <th>$320,800</th>

            </tr>
            
            <tr class="as2" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

                <th>2011/04/25</th>

                <th>$320,800</th>

            </tr>
    
            <tr class="as2" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

                <th>2011/04/25</th>

                <th>$320,800</th>

            </tr>   
            
            <tr class="as2" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

                <th>2011/04/25</th>

                <th>$320,800</th>
            </tr>

            <tr class="as3" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

                <th>2011/04/25</th>

                <th>$320,800</th>

            </tr>

            <tr class="as3" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

                <th>2011/04/25</th>

                <th>$320,800</th>

            </tr>

            <tr class="as3" >

                 <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

                <th>2011/04/25</th>

                <th>$320,800</th>

            </tr>

             <tr class="as3" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

                <th>2011/04/25</th>

                <th>$320,800</th>

            </tr>

            <tr class="as4" >

                 <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

                <th>2011/04/25</th>

                <th>$320,800</th>

            </tr>
            
            <tr class="as4" >

                 <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

                <th>2011/04/25</th>

                <th>$320,800</th>

            </tr> 
            
            <tr class="as4" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

                <th>2011/04/25</th>

                <th>$320,800</th>

            </tr> 
            
            <tr class="as4" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

                <th>2011/04/25</th>

                <th>$320,800</th>

            </tr>   

            <tr class="as5" >

                 <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

                <th>2011/04/25</th>

                <th>$320,800</th>

            </tr>     

            <tr class="as5" >

                 <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

                <th>2011/04/25</th>

                <th>$320,800</th>

            </tr>

            <tr class="as5" >

                 <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

                <th>2011/04/25</th>

                <th>$320,800</th>

            </tr>

            <tr class="as5" >

                 <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

                <th>2011/04/25</th>

                <th>$320,800</th>
            </tr>

            <tr class="as6" >

                <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

                <th>2011/04/25</th>

                <th>$320,800</th>

            </tr>

            <tr class="as6" >

                 <th>Tiger Nixon1</th>

                <th>System Architect</th>

                <th>Edinburgh</th>

                <th>61</th>

                <th>2011/04/25</th>

                <th>$320,800</th>

            </tr>

        </tbody>

    </table>

</body>

</html>
Последний раз редактировалось JAMLIGHT, 26.02.2017 в 20:47.
Ответить с цитированием