Показать сообщение отдельно
  #7 (permalink)  
Старый 05.04.2014, 17:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,067

Плагин для фильтрации строк таблиц
экспромт на заданную тему
<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  body{height:1000px;background:#FF8C00;font-family:Georgia,"Times New Roman",Times,serif;letter-spacing:1px}
  .git{width:700px;margin:0px auto}
  div{height:250px}
  td{background:#000}
  td,th{border:1px solid #555555;color:#FFF;padding:10px;text-align:left}
  .zebra tr:nth-child(2n) td{background:#383838}
  tr:nth-child(1) td:hover,tr:nth-child(1) th:hover{background-image:-webkit-gradient(linear,top,bottom,color-stop(0,#E6E6FA),color-stop(1,#696969));background-image:-ms-linear-gradient(top,#E6E6FA,#696969);background-image:-o-linear-gradient(top,#E6E6FA,#696969);background-image:-moz-linear-gradient(top,#E6E6FA,#696969);background-image:-webkit-linear-gradient(top,#E6E6FA,#696969);background:linear-gradient(to bottom,#E6E6FA,#696969)}
  tr:nth-child(1) td,tr:nth-child(1) th{font-weight:bold;background-image:-webkit-gradient(linear,left,right,color-stop(0,#00008B),color-stop(1,#0060BF));background-image:-ms-linear-gradient(left,#00008B,#0060BF);background-image:-o-linear-gradient(left,#00008B,#0060BF);background-image:-moz-linear-gradient(left,#00008B,#0060BF);background-image:-webkit-linear-gradient(left,#00008B,#0060BF);background:linear-gradient(to right,#00008B,#0060BF)}
  .zebra tr:nth-child(n +2):hover td{background-image:-webkit-gradient(linear,left,right,color-stop(0,#D2691E),color-stop(1,#DEB887));background-image:-ms-linear-gradient(left,#D2691E,#DEB887);background-image:-o-linear-gradient(left,#D2691E,#DEB887);background-image:-moz-linear-gradient(left,#D2691E,#DEB887);background-image:-webkit-linear-gradient(left,#D2691E,#DEB887);background:linear-gradient(to right,#D2691E,#DEB887)}
  table{border-collapse:collapse;border-spacing:0;box-shadow:0 2px 1px 5px rgba(242,242,242,0.1);width:100%}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script>
$(function () {
    $("table").tablework();
});
$.fn.tablework = function() {
    return this.each(function() {
        var $table = $(this),
            $thead = $table.find('thead');
        !$thead.length && ($thead = $('<thead/>').prependTo($table));
        var $tr = $('<tr/>').prependTo($thead),
            hide = {};
        $("tbody tr:first>", $table).each(function(indx, element) {
            var range = ['Без выбора'],
                $td = $("tbody tr :nth-of-type(" + (indx + 1) + ")", $table),
                temp = {};
            $td.each(function(i, el) {
                var text = $(this).text()
                if (!temp[text]) {
                    range.unshift(text);
                    temp[text] = true
                };
            });

            var $select = $('<select/>', {
                'change': function() {
                    var val = this.value;
                    hide[indx] = [];
                    this.selectedIndex && $td.each(function(i, el) {
                        $(this).text() != val && hide[indx].push(i)
                    });
                    var range = [];
                    for (var k in hide) range = range.concat(hide[k]);

                    var $tr = $("tbody tr", $table);
                    $tr.show();
                    $.each(range, function(i, el) {
                        $tr.eq(el).hide()
                    });
                }

            });
            $.each(range, function() {
                $('<option/>', {
                    text: this
                }).prependTo($select);
            });
            $('<td/>').append($select).appendTo($tr);
        });

    });
};
</script>
</head>
<body>
<br>
<table class="zebra git" >

        <tbody>
            <tr class="t_head" id="1">
			<th style="width: 70px;">Период</th>
			<th style="width: 15px;">test</th>
			<th>DBL</th>
			<th>SGL</th>

		</tr>

            <tr>
				<td>Date</td>
				<td>Start time</td>
				<td>End time</td>
				<td>Name</td>
            </tr>
        	<tr>
            	<td>02.06.2010</td>
                <td>10:00</td>
                <td>12:00</td>
                <td>Cleaning</td>
            </tr>
            <tr>
            	<td>02.06.2010</td>
                <td>12:00</td>
                <td>15:00</td>
                <td>Training</td>
            </tr>
            <tr>
            	<td>02.06.2010</td>
                <td>15:00</td>
                <td>17:00</td>
                <td>Rest</td>
            </tr>
            <tr>
            	<td>02.06.2010</td>
                <td>17:00</td>
                <td>21:00</td>
                <td>Work</td>
            </tr>
            <tr>
            	<td>02.06.2010</td>
                <td>21:00</td>
                <td>07:00</td>
                <td>Sleep</td>
            </tr>
        </tbody>
	</table>

</body>
</html>

Последний раз редактировалось рони, 04.02.2018 в 19:58.
Ответить с цитированием