function filter (phrase, _id){
	var words = phrase.value.toLowerCase().split(" ");
	var table = document.getElementById(_id);
	var ele;
	var counter = 1;
	
	//Add Row with No Artist Found text to roster and set it hidden initially. 
	if(table.rows[table.rows.length-1].cells[0].innerHTML != 'No Artist Found'){
		table.insertRow(table.rows.length);
		table.rows[table.rows.length-1].insertCell(0).innerHTML = 'No Artist Found';
		table.rows[table.rows.length-1].style.display = 'none';	
	}	
	
	//Loop through all rows apart last one which should be populated with No Artist Found text.
	for (var r = 1; r < table.rows.length-1; r++){
		var numberCellsHidden = 0;
		//Loop through each cell of the current row
		for (c = 0; c < table.rows[r].cells.length; c++){
			ele = table.rows[r].cells[c].innerHTML.replace(/<[^>]+>/g,"");
			for (var i = 0; i < words.length; i++) {
			    if (ele.toLowerCase().indexOf(words[i])>=0){
					displayStyle = '';
					numberCellsHidden--;
				}	
			    else {
					displayStyle = 'none';
					numberCellsHidden++;
					break;
			    }
		    }
			table.rows[r].cells[c].style.display = displayStyle;
			//If we have hidden all ceels in the row, then hide the row
			if(numberCellsHidden == 3){
				table.rows[r].style.display = 'none';
				counter++;
			}//else if not all cells are hidden in row, show the row
			else if(numberCellsHidden < 3){
				table.rows[r].style.display = '';
			}	
		}
	}
	/*If we turned off all the roster rows apart from the 'No artist Found' row,
	 * then display the 'No Artist Found' text, otherwise, don't display it.
	 */
	if(counter == (table.rows.length-1))
		table.rows[table.rows.length-1].style.display = '';
	else
		table.rows[table.rows.length-1].style.display = 'none';	
}