如何向HTML表格列添加过滤器？

Question

我的桌子看起来像图片中的那个。我也附上了HTML，CSS和JS文件。如果运行以下代码，则将创建一个带有列的html页面。我想为符号列添加过滤器。现在，我将数据复制到excel以应用过滤器。如果我可以在网页中应用过滤器，将会很有帮助。

enter code here

//DATA
//API LAYER
function getDataFromAPI() {
	var settings = {
		type: 'GET',
		url: 'http://api.echofin.co/wga/alerts?limit=100&undefined',
		dataType: 'json',
		success: renderData
	}
	return $.ajax(settings);
}

//DOM MANIPULATION
function renderData(json) {
	var html = '';
	json.forEach(function(item) {
		var stock = createTradeMarkup(item);
		html += stock;
	})
	var mainMarkup = getHeaderMarkup() + html;
	return $('main').html('<table>' + mainMarkup + '</table>');
}

$(function() {
	getDataFromAPI();
})

function f_color(){
if (documnet.getElementById('Put|Call').value = 'Call'){
documnet.getElementById('Put|Call').style.color = "green";
}
}


var converters = {
	biasConverter: function(bias) {
		bias = parseInt(bias);
		var biasLookup = {
			"1": "Bullish",
			"-1": "Bearish"
		};
		return biasLookup[bias];
		//what happens if bias is not one of two choices? 
	},
	
	alertConverter: function(alert) {
		alert = parseInt(alert);
		var alertLookup = {
			"1": "Sweep",
			"2": "Multi-Sweep",
			"3": "Block",
			"4": "Split"
		};
		return alertLookup[alert];
	},

	putCallConverter: function(value) {
		value = parseInt(value);
		var putCallLookup = {
			"1": "Call",
			"-1": "Put"
		};
		return putCallLookup[value];
	},

	longShortConverter: function(value) {
		value = parseInt(value);
		var longShortLookup = {
			"1": "Long",
			"-1": "Short"
		};
		return longShortLookup[value];
	},
	betsizeConverter: function(size) {
		size += ''; //convert size to string 
		var betsizeFormat = '';
		var numOfDigits = size.length;
		if (size.length <= 6) {
			var i = 0;
			while (numOfDigits>3) {
				betsizeFormat += size[i];
				i++;
				numOfDigits -= 1;
			}
			return '$' + betsizeFormat + 'K';
		};

		if (size.length <= 9) {
			var i = 0;
			while (numOfDigits>6) {
				betsizeFormat += size[i];
				i++;
				numOfDigits -= 1;
		}
			return '$' + betsizeFormat + 'M';
		}
	},

	receivedConverter: function(date) {
		// 2017-05-02T20:00:04.529Z
		//need 04-26-2017 3:57 .. 
		var UTCLookup = {
			year: date.slice(0,4),
			month: date.slice(5,7),
			day: date.slice(8,10),
			format: function(hour, mins, meridian) {
				return hour + ':' + mins + meridian
			},
			time: function() {
				//we are four hours behind so subtract 4 from UTC
				var utcHours = parseInt(date.slice(11,13));
				var mins = date.slice(14,16);
				var standardHour = (utcHours - 4);  

				if (utcHours > 16) {
					var estHour = (utcHours - 4) - 12;
					return this.format(estHour, mins, 'pm'); 
				}

				if (utcHours === 16) {
					return this.format(standardHour, mins, 'pm'); 
				}
				
				if (utcHours <= 4) {
					//just incase something comes in over night and 
					if (standardHour === 0) {
						return this.format('12', mins, 'am');
					}
					var overNightLookup = {
							"-1": 11,
							"-2": 10,
							"-3": 9,
							"-4": 8
					}
					return this.format(overNightLookup[parseInt(standardHour)], mins, 'pm'); 
				}
				
				return this.format(standardHour, mins, 'am');
			}
		} 
		//maybe other way to implement this.?
		return UTCLookup.month + '-' + UTCLookup.day + '-' + UTCLookup.year + ' ' + UTCLookup.time(); 
	},

	expirationConverter: function(date) {
		var monthsLookup = {
			'01': 'Jan',
			'02': 'Feb',
			'03': 'Mar',
			'04': 'Apr',
			'05': 'May',
			'06': 'Jun',
			'07': 'Jul',
			'08': 'Aug',
			'09': 'Sep',
			'10': 'Oct',
			'11': 'Nov',
			'12': 'Dec'
		}
		var month = date.slice(5, 7);
		var year = date.slice(0, 4);
		if ( date.slice(8, 10) === '01') {
			return monthsLookup[month] + ' ' + year + ' ' + '(M)';
		}

		return monthsLookup[month] + ' ' + year + ' ' + '(W)'; 
		
	}
}


function createTradeMarkup(item) {
	var tradeInformation = [
		converters.biasConverter(item.bias), 
		converters.receivedConverter(item.received),
		item.symbol,
		converters.expirationConverter(item.expiration),
		item.strikePrice,
		item.referencePrice,
		converters.alertConverter(item.alertType),
		converters.betsizeConverter(item.betSize),
		converters.longShortConverter(item.longOrShort),
		converters.putCallConverter(item.putOrCall)
	]
	
	var tableData = ''
	for (var i=0, length=tradeInformation.length; i<length; i++) {
		var individualKey = tradeInformation[i];
		tableData += '<td>' + individualKey + '</td>';
	}
	return '<tr>' + tableData + '</tr>';
}



function getHeaderMarkup() {
	return '<tr class="header">' +
				'<td>Bull | Bear</td>' +
				'<td>Received</td>' +
				'<td>Symbol</td>' +
				'<td>Expiration</td>' +
				'<td>Strike Price</td>' +
				'<td>Reference Price</td>' +
				'<td>Alert Type</td>' +
				'<td>Bet Size</td>' +
				'<td>Long|Short</td>' +
				'<td>Put|Call</td>' +
			'</tr>';
}

*{
	box-sizing: border-box;
}

table {
	margin: 0 auto;
}

td {
	width: 10%;
	text-align: center;
}

td {
	margin-bottom: 5px;
}

tr {
	height: 50px;
}

tr.header  {
	background-color: lightblue;
}

tr:nth-child(even) {
	
	background-color: #ebebe0;
}

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Option Flow</title>
	<!-- prevent fake favicon requests -->
	<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
	<!-- Normalize.css, a cross-browser reset file -->
  	<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.css" rel="stylesheet">
  	<!-- custom css sheet -->
  	<link rel="stylesheet" type="text/css" href="css/main.css">
	
</head>
<body>

	<main>
		<!-- shows the keys with the values below it, so something like _id with all its values -->
		
	</main>

	<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
	<script type="text/javascript" src="js/converter.js"></script>
	<script type="text/javascript" src="js/appMarkup.js"></script>
	<script type="text/javascript" src="js/app.js"></script>
	<script type="text/javascript" src="js/color.js"></script>
	    
</body>
</html>