We Keep Coding

How to sort by rows containing words and numbers in javascript

Newbie here how can I sort all of the following table row attach an onclick listener on the header after it is displayed.
ID
Name
Inventory Volume
1
Rachel
Data is not enough
2
Ross
100
3
Monica
1
4
Connor
Data is not enough
5
Dustin
-5
into this sorting example is in descending, the words should be the last.
ID
Name
Inventory Volume
2
Ross
100
3
Monica
10
5
Dustin
-5
1
Rachel
Data is not enough
4
Connor
Data is not enough
But I also want the other columns to be sorted as well and the other columns to have the function to sort as well.
Tried this solution but only works for the column.
https://jsfiddle.net/7wnke5q2/
function sortData(data, method) {
let lessData = 'Data Not Enough'
let lastItems = []
let sortedList;
if (method == 'descending') {
sortedList = data.sort((a, b) => {
return a - b
})
} else if (method == 'ascending') {
sortedList = data.sort((a, b) => {
return b - a
})
}
for (let i = 0; i < sortedList.length; i++) {
if (sortedList[i] == lessData) {
let item = sortedList[i]
sortedList.splice(i, 1)
sortedList.push(item)
}
}
sortedList = sortedList.concat(lastItems)
return sortedList
}
Could you please help me out. Thanks in advance!

If i understand, you need all "Data Not Enough" at the end. So, it can works:
function sortData(data, method) {
let lessData = 'Data Not Enough'
let sortedList;
sortedList = data.sort((a, b) => {
if(a=='Data Not Enough')
return 1
if(b=='Data Not Enough')
return -1
return method=='ascending'?a-b:b-a
})
return sortedList
}

something like that ?
just click on header columns to sort the table
const
myTableHead = document.querySelector('#my-table thead')
, myTableHead_TH = document.querySelectorAll('#my-table thead th')
, myTableBody = document.querySelector('#my-table tbody')
, myTableBody_TR = [...document.querySelectorAll('#my-table tbody tr')]
, sortOrder = ['','asc','desc']
, isDNE = str => str.trim() === 'Data is not enough'
;
myTableHead.onclick = ({target}) =>
{
if (!target.matches('th')) return
let idx = (sortOrder.findIndex(x=>x===target.className) +1) %3
myTableHead_TH.forEach(th=>th.className='')
target.className = sortOrder[idx]
if ( sortOrder[idx] )
{
myTableBody_TR
.sort(dynaSort(target.cellIndex, target.dataset.type, sortOrder[idx] ))
.forEach(tr=>myTableBody.appendChild(tr) )
}
}
function dynaSort( colIndex, colType, order='asc' )
{
let sortOrder = (order === 'desc') ? -1 : 1
return function(row_a,row_b)
{
let a = row_a.cells[colIndex].textContent
, b = row_b.cells[colIndex].textContent
;
if (isDNE(a) && isDNE(b)) return 0
if (isDNE(a)) return +1
if (isDNE(b)) return -1
if (colType==='str') return (a.trim().localeCompare(b.trim())) *sortOrder
return (Number(a) - Number(b)) *sortOrder
}
}
table {
border-collapse : collapse;
margin : 2em 1em;
font-family: Arial, Helvetica, sans-serif;
}
td,th {
padding : .2em .8em;
border : 1px solid darkblue;
}
th::after {
display : block;
float : inline-end;
content : '\25B7';
margin : 0 0 0 1em;
transition : 180ms;
color : transparent;
}
th.asc::after {
transform : rotate(-90deg);
color : whitesmoke;
}
th.desc::after {
transform : rotate(+90deg);
color : whitesmoke;
}
thead {
background : #437c97;
color : whitesmoke;
cursor : pointer;
}
<table id="my-table" >
<thead>
<tr>
<th data-type="num">ID</th>
<th data-type="str">Name</th>
<th data-type="num">Inventory Volume</th>
</tr>
</thead>
<tbody>
<tr> <td>1</td> <td>Rachel</td> <td>Data is not enough</td> </tr>
<tr> <td>2</td> <td>Ross</td> <td> 100 </td> </tr>
<tr> <td>3</td> <td>Monica</td> <td> 1 </td> </tr>
<tr> <td>4</td> <td>Connor</td> <td>Data is not enough</td> </tr>
<tr> <td>5</td> <td>Dustin</td> <td> -5 </td> </tr>
</tbody>
</table>

This should work! Using #YamirL sort alghoritm.
function sort(e, method) {
//Get table
while ((e = e.parentElement) && !e.classList.contains("table"));
//Get rows
let rows = Array.from(e.getElementsByTagName("tr"));
//Get each value for each row
let values = rows.map(row => {
let tds = Array.from(row.getElementsByTagName("td"));
return tds.map(td => td.innerHTML);
});
/*
values is a 2D array which contains each row and column
values = [
[Name, Volume], --> The headers need to be removed
[Joey, Data Not Enough],
[Ross, -5],
[Monica, 1],
[Ben, 100],
[Chandler, Data Not Enough]
];
*/
values.shift(); //remove headers
// Now we need to sort the array by volume
values.sort((a, b) => {
var exception = "Data Not Enough";
if(a[1] == exception)
return 1;
if(b[1] == exception)
return -1;
return method == 'ascending' ? a[1] - b[1] : b[1] - a[1];
});
/******* Put sort values on table *************/
// Get body
let body = e.getElementsByTagName("tbody")[0];
// Erase Body
body.innerHTML = "";
// Iterate each row
values.forEach(row => {
// Create new row element
let tr = document.createElement("tr");
// Iterate each column
row.forEach(val => {
// Create new value
let td = document.createElement("td");
// Append values
td.append(val);
tr.append(td);
});
// Append row to body
body.append(tr);
});
}
Here it is a snippet to try the complete code, I added a <tbody> to the table.
function sort(e, method) {
while ((e = e.parentElement) && !e.classList.contains("table"));
let rows = Array.from(e.getElementsByTagName("tr"));
let values = rows.map(row => {
let tds = Array.from(row.getElementsByTagName("td"));
return tds.map(td => td.innerHTML);
});
values.shift();
values.sort((a, b) => {
var exception = "Data Not Enough";
if(a[1] == exception)
return 1;
if(b[1] == exception)
return -1;
return method == 'ascending' ? a[1] - b[1] : b[1] - a[1];
});
let body = e.getElementsByTagName("tbody")[0];
body.innerHTML = "";
values.forEach(row => {
let tr = document.createElement("tr");
row.forEach(val => {
let td = document.createElement("td");
td.append(val);
tr.append(td);
});
body.append(tr);
});
}
.clickable {
cursor: pointer;
}
.clickable:hover {
opacity: 0.7;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col" class="clickable" onclick='sort(this, "descending")'>Volume</th>
</tr>
</thead>
<tbody>
<tr>
<td>Joey</td>
<td>Data Not Enough</td>
</tr>
<tr>
<td>Ross</td>
<td>-5</td>
</tr>
<tr>
<td>Monica</td>
<td>1</td>
</tr>
<tr>
<td>Ben</td>
<td>100</td>
</tr>
<tr>
<td>Chandler</td>
<td>Data Not Enough</td>
</tr>
</tbody>
</table>

Jquery sort table td not sorting currency properly

Hi I am new to jquery and HTML I am trying to sort my table by currency but its not sorting properly if its currency but if its alphabetical sorting its working anyone can help me or guide me I will realy appreciate thank you in advance.My currency format has thousand separator and decimal. whenever the th is clicked the row will be sort
function sortTable(f, n) {
var rows = $('#mytable tbody tr').get();
rows.sort(function(a, b) {
var A = getVal(a);
var B = getVal(b);
if (A < B) {
return -1 * f;
}
if (A > B) {
return 1 * f;
}
return 0;
});
function getVal(elm) {
var v = $(elm).children('td').eq(n).text().toUpperCase();
if ($.isNumeric(v)) {
v = parseInt(v, 10);
}
return v;
}
$.each(rows, function(index, row) {
$('#mytable').children('tbody').append(row);
});
}
var f_sl = 1;
var f_nm = 1;
$("#sl").click(function() {
f_sl *= -1;
var n = $(this).prevAll().length;
sortTable(f_sl, n);
});
$("#nm").click(function() {
f_nm *= -1;
var n = $(this).prevAll().length;
sortTable(f_nm, n);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable">
<thead>
<tr>
<th id="sl">VAL</th>
<th id="nm">name</th>
</tr>
</thead>
<tbody>
<tr>
<td>RM 1,000.00</td>
<td>AINA (W)</td>
</tr>
<tr>
<td>RM 20,000.00</td>
<td>HEYZA</td>
</tr>
<tr>
<td>RM 5,000.15</td>
<td>ANA</td>
</tr>
<tr>
<td>RM 5,000.16</td>
<td>ZED</td>
</tr>
</tbody>
</table>

You can use localeCompare, along with it's numeric option
Instead of:
if (A < B) {
return -1 * f;
}
if (A > B) {
return 1 * f;
}
return 0;
You would use:
if (f === 1) {
return A.localeCompare(B, 'en', {numeric: true});
} else {
return B.localeCompare(A, 'en', {numeric: true});
}
Also, localeCompare can handle the numerical values as Strings, so you don't need to parseInt() in your getVal function - The only additional change for handling Numbers is to use a Regex to remove all the , seperaters from your numbers while sorting; it won't have any affect after sorting, or on words
function sortTable(f, n) {
var rows = $('#mytable tbody tr').get();
rows.sort(function(a, b) {
var A = getVal(a).replace(/(\d),(?=\d)/g, '$1');
var B = getVal(b).replace(/(\d),(?=\d)/g, '$1');
if (f === 1) {
return A.localeCompare(B, 'en-UK', {
numeric: true
});
} else {
return B.localeCompare(A, 'en-UK', {
numeric: true
});
}
});
function getVal(elm) {
return $(elm).children('td').eq(n).text().toUpperCase();
}
$.each(rows, function(index, row) {
$('#mytable').children('tbody').append(row);
});
}
var f_sl = 1;
var f_nm = 1;
$("#sl").click(function() {
f_sl *= -1;
var n = $(this).prevAll().length;
sortTable(f_sl, n);
});
$("#nm").click(function() {
f_nm *= -1;
var n = $(this).prevAll().length;
sortTable(f_nm, n);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable">
<thead>
<tr>
<th id="sl">VAL</th>
<th id="nm">name</th>
</tr>
</thead>
<tbody>
<tr>
<td>RM 6,533.00</td>
<td>AINA (W)</td>
</tr>
<tr>
<td>RM 20.00</td>
<td>HEYZA</td>
</tr>
<tr>
<td>RM 1,174.00</td>
<td>ANA</td>
</tr>
<tr>
<td>RM 50.16</td>
<td>ZED</td>
</tr>
</tbody>
</table>

setting td inner text through script called in razor

I want to do something like this within my view (razor)
if(index == #:{<script>{getPosition(#geResult.assessmentId);}</script>}){
geResult.ResultValue;
}
What will be the proper syntax?
Full HTML
<tr>
#{
var index = 4;
foreach(Assessment geAssessment in Model.assessments)
{
<td>
#foreach (ShortResult geResult in Model.results)
{
if(geResult.StudentID == geStudent.studentid)
{
if(index == #:{<script>{getPosition(#geResult.assessmentId);}</script>} ){
geResult.ResultValue;
}
}
}
</td>
index++;
}
}
</tr>
UPDATE
I am trying the other way round now can anyone guide me please
SCRIPT
function getPosition(id, colIndex) {
var element = '#' + id;
$(this).closest('tr').find('td').eq(colIndex).html("A");
alert($(this).closest('tr').find('td').eq(colIndex).html());
return $(element).index();
}
HTML
<td>
#foreach (ShortResult geResult in Model.results)
{
if(geResult.StudentID == geStudent.studentid)
{
<script>{ getPosition(#geResult.assessmentId, #index); }</script>
}
}
</td>
now the alert returns undefined although i am setting its value (text) just before!!

Finally, after wasting a whole 1.5 days i am able to solve this! hope it helps someone.
SCRIPT
function getPosition(id, colIndex, resultValue) {
var element = '#' + id;
var cell = $('.test').closest('tr').children('td').get(colIndex);
if($(element).index() == colIndex){
cell.innerHTML = resultValue;
}
}
HTML
<tr>
#{
var index = 4;
foreach(Assessment geAssessment in Model.assessments)
{
<td class="test">
#foreach (ShortResult geResult in Model.results)
{
if(geResult.StudentID == geStudent.studentid)
{
if (geResult.ResultValue != null) {
<script>{ getPosition(#geResult.assessmentId, #index, '#geResult.ResultValue'); }</script>
}
}
}
</td>
index++;
}
}
</tr>

How to filter Table row with multiple condition .ie on checkbox selection show respected row. each checkbox represent Column and row value

I have a table with some dynamic data, and columns as Name,Location, Salary. Problem i am facing in Step 2 i.e multiple condition check. Heres the step by step code.
JS Fiddle Demo
Step 1-
Auto generate Filters i.e dynamically add Checkboxes, depend on table row values
autoFilterItem("filterDiv");
Above function generate dynamic checkboxes, logic is it loop over table, read values row by row and return unique value array and generate checkbox respectively, currently am doing for 2 cols having class loc,sal.
Step 2-
Checkbox change event, depend on status (checked/unchekced) table rows will be hide/show .
The problem i am facing is, if user checked 100 ( class as sal), and Kerala ( class as loc) is unchecked then row having kerala should be hide.
For hide and show am adding/removing class .hideRow
///STEP TWO
// On any checkbox clicked returns desired out
$("body").on('change', '.chk', function () {
var arrObj = [],
arrCheckedValueCLass = [];
var objCheckedData = {};
$("#filterDiv .chk").each(function (index, val) {
var sf = $(this);
if (sf.is(":checked")) {
var sf = $(this);
arrObj.push({
dataValue: $(sf).attr('data-value'),
dataClass: $(sf).attr('data-class')
});
}
});
var self = $(this);
var getClassName = self.attr("data-class");
var matchTextValue = $.trim(self.attr("data-value"));
if (self.is(":checked")) {
if (matchTextValue == "All") {
$(".chk").prop('checked', true);
}
$("." + getClassName).each(function () {
var innerSelf = $(this);
var gVal = $.trim(innerSelf.html());
if (matchTextValue == "All") {
innerSelf.closest("tr").removeClass("hideRow");
} else {
if (matchTextValue === gVal) {
console.log("checked and matchTextValue");
var i = 0,
lg = arrObj.length;
var flagSet = false;
for (i; i < lg; ++i) {
var objValue = arrObj[i].dataValue;
var objClass = arrObj[i].dataClass;
if (getClassName != objClass) {
var prevDataCheck = $.trim(innerSelf.closest("tr").find("." + objClass).html());
if (prevDataCheck == objValue) {
flagSet = true;
return true;
}
}
}
if (!flagSet) {
innerSelf.closest("tr").removeClass("hideRow");
innerSelf.closest("tr").addClass(getClassName + "_X");
}
}
}
});
} else {
if (matchTextValue == "All") {
$(".chk").prop('checked', false);
}
$("." + getClassName).each(function () {
var innerSelf = $(this);
var gVal = $.trim(innerSelf.html());
if (matchTextValue === gVal) {
innerSelf.closest("tr").addClass("hideRow");
innerSelf.closest("tr").removeClass(getClassName + "_X");
}
});
}
});
<div id="filterDiv"></div>
<button>Click</button>
<br>
<div id="tableContainer">
<table id="myTable">
<thead>
<tr>
<th data-name='name'>Name</th>
<th data-loc='Location'>Location</th>
<th data-sal='salary'>Salary</th>
<th data-sts='Active'>Active</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name">James</td>
<td class="loc">Mumbai</td>
<td class="sal">500</td>
<td class="sts">Yes</td>
</tr>
<tr>
<td class="name">Joseph</td>
<td class="loc">Kerala</td>
<td class="sal">100</td>
<td class="sts">No</td>
</tr>
<tr>
<td class="name">Jack</td>
<td class="loc">Delhi</td>
<td class="sal">500</td>
<td class="sts">Yes</td>
</tr>
<tr>
<td class="name">Andrea</td>
<td class="loc">Mumbai</td>
<td class="sal">1000</td>
<td class="sts">No</td>
</tr>
<tr>
<td class="name">David</td>
<td class="loc">Delhi</td>
<td class="sal">100</td>
<td class="sts">No</td>
</tr>
<tr>
<td class="name">David</td>
<td class="loc">Delhi</td>
<td class="sal">99900</td>
<td class="sts">No</td>
</tr>
</tbody>
</table>
</div>

I have created the fiddle from the things that you noted and able to produce the result( that is, if user checked 100 ( class as sal), and Kerala ( class as loc) is unchecked then row having kerala should be hide.)
I do not how efficient the solution is.There may be more efficient way to acheive that but anyway below is the js code.
$(document).ready(function () {
//STEP ONE STARTS
// This function generate checkbox from table data, which will be used for filteration
autoFilterItem("filterDiv");
function autoFilterItem(idOfHolderDiv) {
$("#" + idOfHolderDiv).empty();
var arr1 = [];
$(".sal").each(function () {
arr1.push($.trim($(this).html()));
});
var arrNew = unique(arr1).sort(function (a, b) {
return a - b
});
$.each(arrNew, function (i, val) {
$("<input/>", {
"type": "checkbox",
"class": "chk",
"data-class": "sal",
"data-value": val,
"id": "chk" + val,
"checked": "checked"
}).appendTo("#" + idOfHolderDiv).wrap("<div></div>").after(val);
});
$("#" + idOfHolderDiv).append("<hr>");
var arr2 = [];
$(".loc").each(function () {
arr2.push($.trim($(this).html()));
});
var arr2New = unique(arr2).sort();
$.each(arr2New, function (i, val) {
$("<input/>", {
"type": "checkbox",
"class": "chk",
"data-class": "loc",
"data-value": val,
"id": "chk" + val,
"checked": "checked"
}).appendTo("#" + idOfHolderDiv).wrap("<div></div>").after(val);
});
$("#" + idOfHolderDiv).append("<hr>");
function unique(array) {
return $.grep(array, function (el, index) {
return index == $.inArray(el, array);
});
}
}
// STEP ONE ENDS
///STEP TWO
// On any checkbox clicked returns desired out
var selectedSalaryArr = [];
var selectedLocationArr = [];
$("body").on('change', '.chk', function () {
var selectedVal = $(this).attr('data-value');
$('#filterDiv div').each(function () {
var checkedval = $(this).find('input.chk').attr('data-value');
var isChecked = $(this).find('input.chk').is(':checked');
var dataClass = $(this).find('input.chk').attr('data-class');
if (selectedVal === checkedval) {
if (dataClass === 'sal') {
var isExists = $.inArray(checkedval, selectedSalaryArr);
if (isExists === -1) {
selectedSalaryArr.push(checkedval);
} else {
selectedSalaryArr.splice($.inArray(checkedval, selectedSalaryArr), 1);
}
} else {
var isExists = $.inArray(checkedval, selectedLocationArr);
if (isExists === -1) {
selectedLocationArr.push(checkedval);
} else {
selectedLocationArr.splice($.inArray(checkedval, selectedLocationArr), 1);
}
}
}
});
$('#myTable tbody tr').each(function () {
var currentSalary = $(this).find('.sal').text();
var currentLocation = $(this).find('.loc').text();
var matchedSalaryValueExists = $.inArray(currentSalary, selectedSalaryArr);
var matchedLocationValueExists = $.inArray(currentLocation, selectedLocationArr);
if (selectedSalaryArr.length > 0 && selectedLocationArr.length > 0) {
if (matchedSalaryValueExists !== -1 && matchedLocationValueExists !== -1) {
if (!($(this).hasClass('hiderow'))) {
$(this).addClass('hiderow');
}
} else {
if ($(this).hasClass('hiderow')) {
$(this).removeClass('hiderow');
$(this).show();
}
}
}
else {
if (matchedSalaryValueExists !== -1 || matchedLocationValueExists !== -1) {
if (!($(this).hasClass('hiderow'))) {
$(this).addClass('hiderow');
}
} else {
if ($(this).hasClass('hiderow')) {
$(this).removeClass('hiderow');
$(this).show();
}
}
}
});
$('#myTable tbody tr.hiderow').hide();
});
});
Below is the jsfiddle link:
https://jsfiddle.net/shrawanlakhe/v8gyde77/

Javascript Search Exact Results Not Part Of

I am trying to use the Javascript search from the below website however was wondering if there is a way to return only the exact term searched for, as if I type part of a word it returns the table row also.
ie. Seach for "Heath" returns the same result as searching Heathesh", is there a simple workaround?
Script: http://heathesh.com/post/2010/05/06/Filtering-or-searching-an-HTML-table-using-JavaScript.aspx
Example: http://heathesh.com/code/javascript/tablesearch/
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<th>ID</th>
<th>First Name</th>
<th>Surname</th>
<th>Website</th>
</tr>
<tbody id="data">
<tr>
<td>1</td>
<td>Heathesh</td>
<td>Bhandari</td>
<td>http://heathesh.com</td>
</tr>
<tr>
<td>2</td>
<td>Candice</td>
<td>David</td>
<td>http://candicedavid.com</td>
</tr>
</tbody>
</table>
//define the table search object, which can implement both functions and properties
window.tableSearch = {};
//initialize the search, setup the current object
tableSearch.init = function() {
//define the properties I want on the tableSearch object
this.Rows = document.getElementById('data').getElementsByTagName('TR');
this.RowsLength = tableSearch.Rows.length;
this.RowsText = [];
//loop through the table and add the data to the table search object
for (var i = 0; i < tableSearch.RowsLength; i++) {
this.RowsText[i] = (tableSearch.Rows[i].innerText) ? tableSearch.Rows[i].innerText.toUpperCase() : tableSearch.Rows[i].textContent.toUpperCase();
}
}
Next create the actual JavaScript function to run the search like so:
//onlys shows the relevant rows as determined by the search string
tableSearch.runSearch = function() {
//get the search term
this.Term = document.getElementById('textBoxSearch').value.toUpperCase();
//loop through the rows and hide rows that do not match the search query
for (var i = 0, row; row = this.Rows[i], rowText = this.RowsText[i]; i++) {
row.style.display = ((rowText.indexOf(this.Term) != -1) || this.Term === '') ? '' : 'none';
}
}
//handles the enter key being pressed
tableSearch.search = function(e) {
//checks if the user pressed the enter key, and if they did then run the search
var keycode;
if (window.event) { keycode = window.event.keyCode; }
else if (e) { keycode = e.which; }
else { return false; }
if (keycode == 13) {
tableSearch.runSearch();
}
else { return false; }
}
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<input type="text" size="30" maxlength="1000" value="" id="textBoxSearch" onkeyup="tableSearch.search(event);" />
<input type="button" value="Search" onclick="tableSearch.runSearch();" />
</td>
</tr>
</tbody>
</table>

You are matching this with rowText.indexOf() in the code below, that will return the row if the term is found anywhere in the string.
for (var i = 0, row; row = this.Rows[i], rowText = this.RowsText[i]; i++) {
row.style.display = ((rowText.indexOf(this.Term) != -1) || this.Term === '') ? '' : 'none';
}
To get exact matches, change rowText.indexOf(this.Term) != -1 to rowText.toUpperCase() === this.Term.toUpperCase(). The .toUpperCase() converts both strings to uppercase before comparing to make the search case insensitive.
for (var i = 0, row; row = this.Rows[i], rowText = this.RowsText[i]; i++) {
row.style.display = ((rowText.toUpperCase() === this.Term.toUpperCase()) || this.Term === '') ? '' : 'none';
}

The following code will do a partial search if an exact word match did not give any results:
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Search table</title>
</head>
<body style=" background-color:white;">
<input type="text" size="30"
value=""
id="textBoxSearch"
onkeyup="tableSearch.search(this.value);" />
<div id="table"></div>
<script type="text/javascript">
// create a 4 column table with random text
function getRandomText(len){
ret=[];
for(var i =0;i<len;i++){
ret.push(String.fromCharCode(
Math.floor((Math.random()*(85-65))+65)
));
}
return ret.join("");
}
function createRandomTable(){
var ret=["<table>"],i=0,
j=0;
while(i<50){
j=0
ret.push("<tr>");
while(j<5){
ret.push("<td>");
ret.push(getRandomText(5));
ret.push("</td>");
j++;
}
ret.push("</tr>");
i++;
}
document.getElementById("table")
.innerHTML=ret.join("");
}
createRandomTable();
// Code that does the search
tableSearchF=function(){
//private variables
var table=document.getElementById("table")
.getElementsByTagName("table")[0];
var rows=table.getElementsByTagName("tr");
var rowVals=[];
for(var i=0;i<rows.length;i++){
var tmp=[];
var c=rows[i].getElementsByTagName("td");
for(var j=0;j<c.length;j++){
tmp.push(
(c[j].textContent)?c[j].textContent:c[j].innerText
)
}
rowVals.push(tmp);
}
var searchTable=function(r){
var match=false;
var doPartial=true;
// for each row
for(var i=0;i<rowVals.length;i++){
match=false;
//for each cell
cellmatch:
for(var j=0;j<rowVals[i].length;j++){
if(r.test(rowVals[i][j])===true){
console.log("positive match");
match=true;
doPartial=false;
break cellmatch;
}
}
rows[i].style.display=(match)?"":"none";
}
return doPartial;
}
// publicly available methods
return {
search:function(searchText){
var txt = searchText.replace(/([-()\[\]{}+?*.$\^|,:#<!\\])/g
,'\\$1')
.replace(/\x08/g, '\\x08'),
r = new RegExp("\\b"+txt+"\\b","igm");
if(searchTable(r)){
// no exact match, do a partial
r=new RegExp(txt,"igm");
searchTable(r);
}
}
}
}
//initialise tableSearch
var tableSearch=tableSearchF();
</script>
</body>
</html>