skatenerd · November 12, 2014 14:23
diff --git a/tables.js b/tables.js
 <!DOCTYPE html>
 <html lang="en" ng-app="temperature-converter" class="no-js">
  <head>
    <meta charset="utf-8">
    <script src="./x.jquery-1.8.3.min.js"></script>

    <script type="text/javascript">
    var TableController = function(search_box, table) {
      this.search_box = search_box;
      this.table = table;
      var controller = this;
      this.search_box.on('input', function(){controller.impose_invariants()});
    };

    TableController.prototype.pure_display_row = function(row_text, selector_text){
        return row_text.indexOf(selector_text) >= 0;
    };

    TableController.prototype.impose_invariants = function(){
      var controller = this;
      var should_display_row = function(row) {
        var search_query = controller.search_box.val();
        var row_text = row.find('[data-text]').attr("data-text");
        return controller.pure_display_row(row_text, search_query);
      }
      this.table.find('tr').each(function(_,tr){
        var $tr = $(tr);
        if(should_display_row($tr)){
          $tr.show();
        } else {
          $tr.hide();
        }
      });
    }

    $(function(){new TableController($("[name=search]"), $("[name=items]"));});
    </script>
  </head>


  <body>
    <input name='search'>
    </input>
    <table name='items'>
    <tr>
      <td>1</td><td data-text='hello'>hello</td>
    </tr>
    <tr>
      <td>2</td><td data-text='goodbye'>goodbye</td>
    </tr>
    <tr>
      <td>3</td><td data-text='computer'>computer</td>
    </tr>
    <tr>
      <td>4</td><td data-text='television'>television</td>
    </tr>
    <tr>
      <td>5</td><td data-text='table'>table</td>
    </tr>
    <tr>
      <td>6</td><td data-text='lightbulb'>lightbulb</td>
    </tr>
    <tr>
      <td>7</td><td data-text='food'>food</td>
    </tr>
    </table>
  </body>
 </html>
	<!DOCTYPE html>
	<html lang="en" ng-app="temperature-converter" class="no-js">
	<head>
	<meta charset="utf-8">
	<script src="./x.jquery-1.8.3.min.js"></script>

	<script type="text/javascript">
	var TableController = function(search_box, table) {
	this.search_box = search_box;
	this.table = table;
	var controller = this;
	this.search_box.on('input', function(){controller.impose_invariants()});
	};

	TableController.prototype.pure_display_row = function(row_text, selector_text){
	return row_text.indexOf(selector_text) >= 0;
	};

	TableController.prototype.impose_invariants = function(){
	var controller = this;
	var should_display_row = function(row) {
	var search_query = controller.search_box.val();
	var row_text = row.find('[data-text]').attr("data-text");
	return controller.pure_display_row(row_text, search_query);
	}
	this.table.find('tr').each(function(_,tr){
	var $tr = $(tr);
	if(should_display_row($tr)){
	$tr.show();
	} else {
	$tr.hide();
	}
	});
	}

	$(function(){new TableController($("[name=search]"), $("[name=items]"));});
	</script>
	</head>


	<body>
	<input name='search'>
	</input>
	<table name='items'>
	<tr>
	<td>1</td><td data-text='hello'>hello</td>
	</tr>
	<tr>
	<td>2</td><td data-text='goodbye'>goodbye</td>
	</tr>
	<tr>
	<td>3</td><td data-text='computer'>computer</td>
	</tr>
	<tr>
	<td>4</td><td data-text='television'>television</td>
	</tr>
	<tr>
	<td>5</td><td data-text='table'>table</td>
	</tr>
	<tr>
	<td>6</td><td data-text='lightbulb'>lightbulb</td>
	</tr>
	<tr>
	<td>7</td><td data-text='food'>food</td>
	</tr>
	</table>
	</body>
	</html>