laimas,
}).find('table'). ничего не найдёт , плагин не возвращает таблицу и далее код работает с 1 строкой а их несколько. |
Цитата:
|
Цитата:
|
возможно ли в этом коде привязать смену бэкграунда ячеек шапки к событию показа строк так чтобы при заполненном фильтре цвет не менялся без скрытия/раскрытия?
<!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,
надо изучать api плагина и скрывать или показывать или выделять строки используя его, даже мой код скрытия/показа строк при наличии такого api неуместен. |
Понятно.Изменю структуру таблицы
|
Цитата:
|
фильтрация видимых строк таблицы
JAMLIGHT,
поиск и скрытие без плагина
<!DOCTYPE html>
<html lang="En">
<head>
<title>Table</title>
<meta charset="utf-8">
<style type="text/css">
#myTable tbody tr {
display: none; }
#myTable thead td.active{
background-color: #FF0000;
}
#myTable thead td{
background-color: #008000;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var box = $("#myTable").find("[data-box]");
box.on("click", function() {
var cls = "." + $(this).data("box");
var hide = $(this).toggleClass("active").is(".active")
$(cls).toggle(hide)
})
$('#search').on('input', function () {
var $rows = ""+$.map(box.filter(".active"),function(el) {
return "." + $(el).data("box")
});
var val = '\(' + $.trim($(this).val()).split(/\s+/).join('|') + '\)',
reg = RegExp(val, 'i'),
text;
$($rows).show().filter(function () {
text = $(this).text();
return !reg.test(text);
}).hide();
});
});
</script>
</head>
<body>
<input id="search" name="search" value="" >
<table border="1" id="myTable" class="display">
<thead>
<tr>
<th colspan="6">
<table><thead><tr>
<td data-box="as1">Надо развернуть1</td>
<td data-box="as2">Надо развернуть2</td>
<td data-box="as3">Надо развернуть3</td>
<td data-box="as4">Надо развернуть4</td>
<td data-box="as5">Надо развернуть5</td>
<td data-box="as6">Надо развернуть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="as1" >
<th>Tiger Nixon</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 Nixon2</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>Garrett Winters</th>
<th>Accountant</th>
<th>Tokyo</th>
<th>63</th>
<th>2011/07/25</th>
<th>$170,750</th>
</tr>
<tr class="as2" >
<th>Garrett Winters</th>
<th>Accountant</th>
<th>Tokyo</th>
<th>63</th>
<th>2011/07/25</th>
<th>$170,750</th>
</tr>
<tr class="as3" >
<th>Ashton Cox</th>
<th>Junior Technical Author</th>
<th>San Francisco</th>
<th>66</th>
<th>2009/01/12</th>
<th>$86,000</th>
</tr>
<tr class="as3" >
<th>Ashton Cox</th>
<th>Senior Javascript Developer</th>
<th>Edinburgh</th>
<th>22</th>
<th>2012/03/29</th>
<th>$433,060</th>
</tr>
<tr class="as3" >
<th>Ashton Cox</th>
<th>Accountant</th>
<th>Tokyo</th>
<th>33</th>
<th>2008/11/28</th>
<th>$162,700</th>
</tr>
<tr class="as4" >
<th>Cedric Kelly</th>
<th>Integration Specialist</th>
<th>New York</th>
<th>61</th>
<th>2012/12/02</th>
<th>$372,000</th>
</tr>
<tr class="as4" >
<th>Cedric Kelly</th>
<th>Sales Assistant</th>
<th>San Francisco</th>
<th>59</th>
<th>2012/08/06</th>
<th>$137,500</th>
</tr>
<tr class="as5" >
<th>Airi Satou</th>
<th>Integration Specialist</th>
<th>Tokyo</th>
<th>55</th>
<th>2010/10/14</th>
<th>$327,900</th>
</tr>
<tr class="as5" >
<th>Airi Satou</th>
<th>Javascript Developer</th>
<th>San Francisco</th>
<th>39</th>
<th>2009/09/15</th>
<th>$205,500</th>
</tr>
<tr class="as5" >
<th>Airi Satou</th>
<th>Software Engineer</th>
<th>Edinburgh</th>
<th>23</th>
<th>2008/12/13</th>
<th>$103,600</th>
</tr>
<tr class="as6" >
<th>Brielle Williamson</th>
<th>Office Manager</th>
<th>London</th>
<th>30</th>
<th>2008/12/19</th>
<th>$90,560</th>
</tr>
<tr class="as1" >
<th>Tiger Nixon</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 Nixon2</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>Garrett Winters</th>
<th>Accountant</th>
<th>Tokyo</th>
<th>63</th>
<th>2011/07/25</th>
<th>$170,750</th>
</tr>
<tr class="as2" >
<th>Garrett Winters</th>
<th>Accountant</th>
<th>Tokyo</th>
<th>63</th>
<th>2011/07/25</th>
<th>$170,750</th>
</tr>
<tr class="as3" >
<th>Ashton Cox</th>
<th>Junior Technical Author</th>
<th>San Francisco</th>
<th>66</th>
<th>2009/01/12</th>
<th>$86,000</th>
</tr>
<tr class="as3" >
<th>Ashton Cox</th>
<th>Senior Javascript Developer</th>
<th>Edinburgh</th>
<th>22</th>
<th>2012/03/29</th>
<th>$433,060</th>
</tr>
<tr class="as3" >
<th>Ashton Cox</th>
<th>Accountant</th>
<th>Tokyo</th>
<th>33</th>
<th>2008/11/28</th>
<th>$162,700</th>
</tr>
<tr class="as4" >
<th>Cedric Kelly</th>
<th>Integration Specialist</th>
<th>New York</th>
<th>61</th>
<th>2012/12/02</th>
<th>$372,000</th>
</tr>
<tr class="as4" >
<th>Cedric Kelly</th>
<th>Sales Assistant</th>
<th>San Francisco</th>
<th>59</th>
<th>2012/08/06</th>
<th>$137,500</th>
</tr>
<tr class="as5" >
<th>Airi Satou</th>
<th>Integration Specialist</th>
<th>Tokyo</th>
<th>55</th>
<th>2010/10/14</th>
<th>$327,900</th>
</tr>
<tr class="as5" >
<th>Airi Satou</th>
<th>Javascript Developer</th>
<th>San Francisco</th>
<th>39</th>
<th>2009/09/15</th>
<th>$205,500</th>
</tr>
<tr class="as5" >
<th>Airi Satou</th>
<th>Software Engineer</th>
<th>Edinburgh</th>
<th>23</th>
<th>2008/12/13</th>
<th>$103,600</th>
</tr>
<tr class="as6" >
<th>Brielle Williamson</th>
<th>Office Manager</th>
<th>London</th>
<th>30</th>
<th>2008/12/19</th>
<th>$90,560</th>
</tr>
</tbody>
</table>
</body>
</html>
|
Супер.То что нужно и ничего лишнего.
|
а прикрутить сюда медленное разворачивание как здесь:https://webkab.ru/skript-dlya-svorac...enta-po-kliku/ реально? Наверно надо вcю таблицу переписывть через <DIV>
|
| Часовой пояс GMT +3, время: 20:07. |