jquery - 我可以在此 jQuery 插件中更改什么以包括对隐藏的表行进行排序

标签 jquery html css sorting sorttable.js

在研究了各种表格排序 jQuery 插件之后，我遇到了一个可以完美运行的插件，因为它满足以下要求:

  • 正确排序日期
  • 正确排序数字
  • 正确排序数字单词(例如:一、二、三)
  • 它以 DOM 感知方式排序。这意味着，如果您更新表格单元格的内容，当您单击表格标题对该列进行排序时，它会识别新值，而不是根据首次加载页面时的内容进行排序。 (此功能特别难以找到，因为流行的表格排序器在排序时无法识别运行时的变化)

我遇到的唯一问题是它似乎只对可见的行进行排序。我希望它对整个表格进行排序，而不仅仅是可见的表格，同时保持上述所有功能(尤其是 DOM 感知部分)，因为这将用于用户可能更新数据的表格，并随后进行排序。

我将开源这个 jQuery 插件，所以我在这里分享代码没有问题。这里的 jQuery 代码是我的，我用于排序部分的插件在这里:http://www.kryogenix.org/code/browser/sorttable .

下面的代码演示了这个问题。您可以单击任何单元格以进行内联编辑，并可以通过这种方式对 DOM 部分进行更改。

(function($) {
  $.fn.tables = function(options) {

    var settings = $.extend({
      page: 0,
      pageCount: 10,
    }, options);

    $thead = this.find('thead');
    $tbody = this.find('tbody');
    $tfoot = this.find('tfoot > tr > td').attr('colspan', $tbody.find('tr')[0].cells.length);

    var align = '';
    for (var content_align = 0; content_align < $thead.find('tr')[0].cells.length; content_align++) {
      align = $($thead.find('tr')[0].cells[content_align]).attr('data-align');
      if (align === undefined) {

      } else {
        $tbody.find('tr > td:nth-child(' + (content_align + 1) + ')').each(function() {
          $(this).addClass(align);
        });
      }
    }

    var numRows = $tbody.find('tr').length;
    var numPages = Math.ceil(numRows / settings.pageCount);

    this.bind('repaginate', function() {
      $tbody.find('tr').removeClass('visible').slice(settings.page * settings.pageCount, (settings.page + 1) * settings.pageCount).addClass('visible');
    });
    this.trigger('repaginate');

    $tfoot.find('td').html('');
    for (var page = 0; page < numPages; page++) {
      $('<a></a>').text(page + 1).bind('click', {
        newPage: page
      }, function(event) {
        settings.page = event.data['newPage'];
        $(this).trigger('repaginate');
        $(this).addClass('active').siblings().removeClass('active');
        if (options.pageChanged !== undefined) {
          options.pageChanged(this);
        }
      }).appendTo($tfoot); //.addClass('clickable');
    }

    $tbody.find('td').click(function() {
      if (options.cellClick !== undefined) {
        if ($(this).hasClass('editing') == false) {
          var col = $(this).parent().children().index($(this));
          var row = $(this).parent().parent().children().index($(this).parent())

          var type = $($thead.find('tr')[0].cells[col]).attr('data-type');
          var typevalues = $($thead.find('tr')[0].cells[col]).attr('data-values');
          var align = $($thead.find('tr')[0].cells[col]).attr('data-align');

          console.log(type);

          $(this).addClass('editing');
          options.cellClick(this, true, col, row);
          switch (type) {
            case 'text':
              $(this).html('<input type="text" value="' + $(this).text() + '">');
              $(this).find('input').focus().blur(function() {
                $(this).parent().removeClass('editing');
                options.cellClick($(this).parent(), false, col, row);
                $(this).parent().html($(this).prop('value'));
              });
              break;
            case 'textarea':
              _html = $(this).html();
              $(this).html('<textarea type="text">' + $(this).html().replace(/\<br\\?>/g, "\n") + '</textarea>');
              $(this).find('textarea').focus().blur(function() {
                $(this).parent().removeClass('editing');
                options.cellClick($(this).parent(), false, col, row);
                $(this).parent().html($(this).prop('value').replace(/\n/g, "<br>"));
              });
              break;
            case 'number':
              $(this).html('<input type="number" value="' + $(this).text() + '">');
              $(this).find('input').focus().blur(function() {
                $(this).parent().removeClass('editing');
                options.cellClick($(this).parent(), false, col, row);
                $(this).parent().html($(this).prop('value'));
              });
              break;
            case 'currency':
              $(this).html('<input type="currency" value="' + $(this).text() + '">');
              $(this).find('input').focus().blur(function() {
                $(this).parent().removeClass('editing');
                options.cellClick($(this).parent(), false, col, row);
                $(this).parent().html($(this).prop('value'));
              });
              break;
            case 'select':
              if (typevalues === undefined) {
                console.log('You must define both \'data-type\' and \'data-values\' for select elements. \'data-values\' should be a comma delimited array of the items to be displayed in the drop-down');
              } else {
                typevalues = typevalues.split(',');
                _html = '<select>';
                for (var i = 0; i < typevalues.length; i++) {
                  if (typevalues[i] == $(this).text()) {
                    _html = _html + '<option value="' + typevalues[i] + '" selected>' + typevalues[i] + '</option>';
                  } else {
                    _html = _html + '<option value="' + typevalues[i] + '">' + typevalues[i] + '</option>';
                  }
                }
                _html = _html + '</select>';
                $(this).html(_html);
                $(this).find('select').focus().change(function() {
                  $(this).parent().removeClass('editing');
                  options.cellClick($(this).parent(), false, col, row);
                  $(this).parent().html($(this).prop('value'));
                }).blur(function() {
                  $(this).parent().removeClass('editing');
                  options.cellClick($(this).parent(), false, col, row);
                  $(this).parent().html($(this).prop('value'));
                });
              }
              break;
            case 'checkbox':
              if (typevalues === undefined) {
                $($thead.find('tr')[0].cells[col]).attr('data-values', 'T,F');
                typevalues = $($thead.find('tr')[0].cells[col]).attr('data-values');
                console.log('You can define the \'data-values\' parameter for checkbox elements. \'data-values\' should be a comma delimited array of two items. The first item is the \'checked\' value, and the second item is the \'unchecked\' value. Defaults to \'T,F\'');
              }
              typevalues = typevalues.split(',');
              _html = '';
              if (typevalues[0] == $(this).text()) {
                _html = '<input type="checkbox" checked="checked">';
              } else {
                _html = '<input type="checkbox">';
              }
              $(this).html(_html);
              $(this).find('input').focus().click(function() {
                  $(this).parent().removeClass('editing');
                  options.cellClick($(this).parent(), false, col, row);
                  typevalues = $($thead.find('tr')[0].cells[col]).attr('data-values').split(',');
                  if (this.checked) {
                    $(this).parent().html(typevalues[0]);
                  } else {
                    $(this).parent().html(typevalues[1]);
                  }
                })
                .blur(function() {
                  $(this).parent().removeClass('editing');
                  options.cellClick($(this).parent(), false, col, row);
                  typevalues = $($thead.find('tr')[0].cells[col]).attr('data-values').split(',');
                  if (this.checked) {
                    $(this).parent().html(typevalues[0]);
                  } else {
                    $(this).parent().html(typevalues[1]);
                  }
                });
              break;
          }
        }
      }
    })

    this.addClass('sortable');

    $tfoot.find('a:first-child').addClass('active');

    return this;
  };
}(jQuery));
:root {
  --tables-even-color: #CDEDF7;
  --tables-odd-color: #90C3D4;
}
.tables {
  border-collapse: collapse;
}
/* Header */

.tables thead > tr {
  background: #3E8096;
  color: #CDEDF7;
}
.tables thead > tr > td {
  padding: 4px;
  padding-left: 8px;
  padding-right: 10px;
}
.tables thead > tr > td:hover {
  background: #CDEDF7 !important;
  color: #3E8096 !important;
}
/* Footer */

.tables tfoot > tr {
  background: #3E8096;
  color: #CDEDF7;
}
.tables tfoot > tr > td > a {
  border: 1px solid #3E8096;
  padding: 4px;
  cursor: pointer;
  display: inline-block;
}
.tables tfoot > tr > td > a:hover {
  border: 1px solid #CDEDF7;
}
.tables tfoot > tr > td > a.active {
  background: #CDEDF7;
  color: #3E8096;
}
/* Rows */

.tables tbody > tr:nth-child(even) {
  background: #CDEDF7;
  color: #90C3D4;
}
.tables tbody > tr:nth-child(even):hover {
  background: #18EAF5;
  color: #90C3D4;
}
.tables tbody > tr:nth-child(odd) {
  background: #90C3D4;
  color: #CDEDF7;
}
.tables tbody > tr:nth-child(odd):hover {
  background: #18EAF5;
  color: #90C3D4;
}
.tables tbody > tr {
  display: none;
}
.tables tbody > tr.visible {
  display: table-row !important;
}
.tables tbody > tr > td {
  padding: 5px;
  cursor: default;
}
/* Cell Content */

.tables tbody > tr > td.center {
  text-align: center;
}
.tables tbody > tr > td.center > input {
  text-align: center;
}
.tables tbody > tr > td.center > textarea {
  text-align: center;
}
.tables tbody > tr > td.right {
  text-align: right;
}
.tables tbody > tr > td.right > input {
  text-align: right;
}
.tables tbody > tr > td.right > textarea {
  text-align: right;
}
<html>

<head>
  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
  <script src="http://www.kryogenix.org/code/browser/sorttable/sorttable.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="jquery.tables.css">
  <script type="text/javascript">
    $(document).ready(function() {
      $table = $('.tables').tables({
        pageChanged: function(item) {
          console.log($(item).text());
        },
        cellClick: function(item, focused, column, row) {
          console.log('COLUMN: ' + column + ', ROW: ' + row);
        }
      });

    })
  </script>

</head>

<body>
  <table class="tables">
    <thead>
      <tr>
        <td data-type="textarea">Column 1</td>
        <td data-type="checkbox" data-align="center">Column 2</td>
        <td data-type="select" data-values="Apples,Oranges,Bananas">Column 3</td>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>aa</td>
        <td>ab</td>
        <td>Apples</td>
      </tr>

      <tr>
        <td>ac</td>
        <td>ad</td>
        <td>Oranges</td>
      </tr>

      <tr>
        <td>bb
          <br>ccc<b>newline</b>
        </td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>aaa</td>
        <td>T</td>
        <td>Apples</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>
      <tr>
        <td>bbccc</td>
        <td>F</td>
        <td>Oranges</td>
      </tr>

    </tbody>

    <tfoot>
      <tr>
        <td colspan="1"></td>
      </tr>
    </tfoot>
  </table>
</body>

</html>

奖励:如果您能弄清楚如何在排序后更正 css 交替行颜色，那就太棒了(无需向每个 TD 添加任何内容...基本上，只需以某种方式“刷新”css)

最佳答案

了解如何在 DOM 中进行排序，同时了解对底层元素所做的任何更改，但是我仍然无法将排序恢复为原始顺序(未排序)。

以下是我到目前为止想出的:

(function ( $ ) {
	$.fn.tables = function( options ) {
		
		var settings = $.extend({
			page: 0,
			pageCount: 10,
		}, options );

		this.addClass('sortable');
		
		$thead = this.find('thead');
		$tbody = this.find('tbody');
		$tfoot = this.find('tfoot > tr > td').attr('colspan', $tbody.find('tr')[0].cells.length);

		var align = '';
		for(var content_align = 0; content_align < $thead.find('tr')[0].cells.length; content_align++) {
			align = $($thead.find('tr')[0].cells[content_align]).attr('data-align');
			if(align === undefined) {

			} else {
				$tbody.find('tr > td:nth-child(' + (content_align + 1) + ')').each(function(){
					$(this).addClass(align);
				});
			}
		}
		
		var numRows = $tbody.find('tr').length;
		var numPages = Math.ceil(numRows / settings.pageCount);

		this.bind('repaginate', function() {
			$tbody.find('tr').removeClass('visible').slice(settings.page * settings.pageCount, (settings.page + 1) * settings.pageCount).addClass('visible');
		});
		this.trigger('repaginate');

		$thead.find('tr > td').click(function() {
			var rows = $tbody.find('tr').get();
			var col = $(this).parent().children().index($(this));
			col++;

			if($(this).hasClass('desc')) {
				$(this).removeClass('desc');
			}
			
			if($(this).hasClass('asc')) {
				$(this).removeClass('asc').addClass('desc');
				rows.sort(function(a, b) {
				  alert(col);
				  var A = $(a).children('td:nth-child(' + col + ')').eq(0).text().toUpperCase();
				  var B = $(b).children('td:nth-child(' + col + ')').eq(0).text().toUpperCase();

				  if($.isNumeric(A) || $.isNumeric(B)) { A = parseInt(A); B = parseInt(B); }

				  if(A > B) { return -1; }
				  if(A < B) { return 1; }
				  return 0;
				});
			} else {
				$(this).addClass('asc');
				rows.sort(function(a, b) {
				  alert(col);
				  var A = $(a).children('td:nth-child(' + col + ')').eq(0).text().toUpperCase();
				  var B = $(b).children('td:nth-child(' + col + ')').eq(0).text().toUpperCase();

				  if($.isNumeric(A) || $.isNumeric(B)) { A = parseInt(A); B = parseInt(B); }

				  if(A < B) { return -1; }
				  if(A > B) { return 1; }
				  return 0;
				});
			}

			$(this).siblings().removeClass('asc').removeClass('desc');
			
			$.each(rows, function(index, row) {
			  $tbody.append(row);
			});
			
			$tbody.find('tr').removeClass('visible').slice(settings.page * settings.pageCount, (settings.page + 1) * settings.pageCount).addClass('visible');
			
		});
		
		
		$tfoot.find('td').html('');
		for (var page = 0; page < numPages; page++) {
			$('<a></a>').text(page + 1).bind('click', {
				newPage: page
			}, function(event) {
				settings.page = event.data['newPage'];
				$(this).trigger('repaginate');
				$(this).addClass('active').siblings().removeClass('active');
				if(options.pageChanged !== undefined) {
					options.pageChanged(this);
				}
			}).appendTo($tfoot); //.addClass('clickable');
		}
		
		$tbody.find('td').click(function() {
			if(options.cellClick !== undefined) {
				if($(this).hasClass('editing') == false) {
					var col = $(this).parent().children().index($(this));
					var row = $(this).parent().parent().children().index($(this).parent())

					var type = $($thead.find('tr')[0].cells[col]).attr('data-type');
					var typevalues = $($thead.find('tr')[0].cells[col]).attr('data-values');
					var align = $($thead.find('tr')[0].cells[col]).attr('data-align');
					
					console.log(type);
					
					$(this).addClass('editing');
					options.cellClick(this, true, col, row);
					switch(type) {
						case 'text':
							$(this).html( '<input type="text" value="' + $(this).text() + '">' );
							$(this).find('input').focus().blur(function(){
								$(this).parent().removeClass('editing');
								options.cellClick($(this).parent(), false, col, row);
								$(this).parent().html( $(this).prop('value') );
							});
							break;
						case 'textarea':
							_html = $(this).html();
							$(this).html( '<textarea type="text">' + $(this).html().replace(/\<br\\?>/g, "\n") + '</textarea>' );
							$(this).find('textarea').focus().blur(function(){
								$(this).parent().removeClass('editing');
								options.cellClick($(this).parent(), false, col, row);
								$(this).parent().html( $(this).prop('value').replace(/\n/g,"<br>") );
							});
							break;						
						case 'number':
							$(this).html( '<input type="number" value="' + $(this).text() + '">' );
							$(this).find('input').focus().blur(function(){
								$(this).parent().removeClass('editing');
								options.cellClick($(this).parent(), false, col, row);
								$(this).parent().html( $(this).prop('value') );
							});
							break;
						case 'currency':
							$(this).html( '<input type="currency" value="' + $(this).text() + '">' );
							$(this).find('input').focus().blur(function(){
								$(this).parent().removeClass('editing');
								options.cellClick($(this).parent(), false, col, row);
								$(this).parent().html( $(this).prop('value') );
							});
							break;
						case 'select':
							if(typevalues === undefined) {
								console.log('You must define both \'data-type\' and \'data-values\' for select elements. \'data-values\' should be a comma delimited array of the items to be displayed in the drop-down');
							} else {
								typevalues = typevalues.split(',');
								_html = '<select>';
								for(var i = 0; i < typevalues.length; i++) {
									if(typevalues[i] == $(this).text()) {
										_html = _html + '<option value="' + typevalues[i] + '" selected>' + typevalues[i] + '</option>';
									} else {
										_html = _html + '<option value="' + typevalues[i] + '">' + typevalues[i] + '</option>';
									}
								}
								_html = _html + '</select>';
								$(this).html( _html );
								$(this).find('select').focus().change(function(){
									$(this).parent().removeClass('editing');
									options.cellClick($(this).parent(), false, col, row);
									$(this).parent().html( $(this).prop('value') );
								}).blur(function(){
									$(this).parent().removeClass('editing');
									options.cellClick($(this).parent(), false, col, row);
									$(this).parent().html( $(this).prop('value') );
								});
							}
							break;
						case 'checkbox':
							if(typevalues === undefined) {
								$($thead.find('tr')[0].cells[col]).attr('data-values', 'T,F');
								typevalues = $($thead.find('tr')[0].cells[col]).attr('data-values');
								console.log('You can define the \'data-values\' parameter for checkbox elements. \'data-values\' should be a comma delimited array of two items. The first item is the \'checked\' value, and the second item is the \'unchecked\' value. Defaults to \'T,F\'');
							}
							typevalues = typevalues.split(',');
							_html = '';
							if(typevalues[0] == $(this).text()) {
								_html = '<input type="checkbox" checked="checked">';
							} else {
								_html = '<input type="checkbox">';
							}
							$(this).html( _html );
							$(this).find('input').focus().click(function(){
								$(this).parent().removeClass('editing');
								options.cellClick($(this).parent(), false, col, row);
								typevalues = $($thead.find('tr')[0].cells[col]).attr('data-values').split(',');
								if(this.checked) {
									$(this).parent().html( typevalues[0] );
								} else {
									$(this).parent().html( typevalues[1] );
								}
							})
							.blur(function(){
								$(this).parent().removeClass('editing');
								options.cellClick($(this).parent(), false, col, row);
								typevalues = $($thead.find('tr')[0].cells[col]).attr('data-values').split(',');
								if(this.checked) {
									$(this).parent().html( typevalues[0] );
								} else {
									$(this).parent().html( typevalues[1] );
								}
							});
							break;
					}
				}
			}
		})
		
		$tfoot.find('a:first-child').addClass('active');
		
		return this;
	};
}(jQuery));
:root {
  --tables-even-color: #CDEDF7;
  --tables-odd-color: #90C3D4;
}

.tables {
	border-collapse: collapse;
}

/* Header */
.tables > thead  > tr {
	background: #3E8096;
	color: #CDEDF7;
}

.tables > thead > tr > td {
	padding: 4px;
	padding-left: 8px;
	padding-right: 10px;
}
.tables > thead > tr > td:hover{
	background: #CDEDF7 !important;
	color: #3E8096;
}

.tables > thead > tr > td::after {
	content: " \22EF";
}

.tables > thead > tr > td.asc::after {
	content: " \22F1";
}
.tables > thead > tr > td.desc::after {
	content: " \22F0";
}

/* Footer */
.tables > tfoot  > tr {
	background: #3E8096;
	color: #CDEDF7;
}

.tables > tfoot > tr > td > a {
	border: 1px solid #3E8096;
	padding: 4px;
	cursor: pointer;
	display: inline-block;
}

.tables > tfoot > tr > td > a:hover {
	border: 1px solid #CDEDF7;
}

.tables > tfoot > tr > td > a.active {
	background: #CDEDF7;
	color: #3E8096;
}

/* Rows */
.tables > tbody > tr:nth-child(even) {
	background: #CDEDF7;
	color: #90C3D4;
}
.tables > tbody > tr:nth-child(even):hover {
	background: #18EAF5;
	color: #90C3D4;
}

.tables > tbody > tr:nth-child(odd) {
	background: #90C3D4;
	color: #CDEDF7;
}
.tables > tbody > tr:nth-child(odd):hover {
	background: #18EAF5;
	color: #90C3D4;
}

.tables > tbody > tr {
	display: none;
}

.tables > tbody > tr.visible {
	display: table-row !important;
}

.tables > tbody > tr > td {
	padding: 5px;
	cursor: default;
}

/* Cell Content */
.tables > tbody > tr > td.center {
	text-align: center;
}
.tables > tbody > tr > td.center  > input {
	text-align: center;
}
.tables > tbody > tr > td.center  > textarea {
	text-align: center;
}


.tables > tbody > tr > td.right {
	text-align: right;
}
.tables > tbody > tr > td.right  > input {
	text-align: right;
}
.tables > tbody > tr > td.right  > textarea {
	text-align: right;
}
<html>
	<head>
		<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>

		<script type="text/javascript">
			$(document).ready(function() {
				$table = $('.tables').tables( {
					pageChanged: function(item) {
						//alert(e.text());
						console.log($(item).text());
					},
					cellClick: function(item, focused, column, row) {
						//console.log('COLUMN: ' + column + ', ROW: ' + row);
					}
				});
			})
		</script>
		
	</head>
	
	<body>
		<table class="tables">
			<thead>
				<tr>
					<td data-type="textarea">Column 1</td>
					<td data-type="checkbox" data-align="center">Column 2</td>
<!--					<td data-type="select" data-values="Apples,Oranges,Bananas">Column 2</td> -->
				</tr>
			</thead>
			
			<tbody>
				<tr>
					<td>aa</td>
					<td>ab</td>
				</tr>
	
				<tr>
					<td>ac</td>
					<td>ad</td>
				</tr>

				<tr><td>bb<br>ccc<b>hello</b></td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr><td>bb</td><td>bc</td></tr>
				<tr>
					<td>ac</td>
					<td>ad</td>
				</tr>				
			</tbody>
			
			<tfoot>
				<tr><td colspan="1"></td></tr>
			</tfoot>
		</table>
	</body>
</html>

关于jquery - 我可以在此 jQuery 插件中更改什么以包括对隐藏的表行进行排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35358419/

上一篇：css - asp :label with CSS? 如何设置数字格式

下一篇：html - Bootstrap 移动导航栏宽度

相关文章：

javascript - 如何在html复选框值参数中使用javaScript变量？

javascript - Angularjs 等到 div 背景图像显示

javascript - 标准控制按钮的 OpenLayers CSS 样式

html - 图像 slider 显示在移动导航栏上方的问题

jquery text()，将<br>解释为新行

jquery - 控制台未定义

javascript - toFixed(2) 不四舍五入？

jquery - 通过搜索选择 Material 设计

html - 涉及 z-index 和透明度的 CSS 样式效果

jquery - 为什么这个 CSS 过渡没有完成它的移动悬停

©2024 IT工具网  联系我们