Finding values from first column in html table using JS?
I have this table
<th>Example No.</th>
<th>Column 1</th>
<tr>
<td id="SampleId">3512376894</td>
<td>two.test2@hotmail.com</td>
</tr>
I have a script that looks for values across all columns. But all I want to do is search for values on the first column using td id only. But I don't know how to do it. Please help me to do this? Thank you!
Here's the JScript:
function doSearch() {
var searchText = document.getElementById('searchTerm').value;
var targetTable = document.getElementById('dataTable');
var targetTableColCount;
for (var rowIndex = 0; rowIndex < targetTable.rows.length; rowIndex++) {
var rowData = '';
if (rowIndex == 0) {
targetTableColCount = targetTable.rows.item(rowIndex).cells.length;
continue; //do not execute further code for header row.
}
for (var colIndex = 0; colIndex < targetTableColCount; colIndex++) {
rowData += targetTable.rows.item(rowIndex).cells.item(colIndex).textContent;
if (rowIndex <= 1) {
document.getElementById('noresults').style.display = "block";
}
}
}
}
+3
source to share
4 answers
Use the snippet below to search in a specific column for a specific term.
<!-- HTML -->
<table id="dataTable">
<th>Example No.</th>
<th>Column 1</th>
<th>Column 2</th>
<tr>
<td>345678917</td>
<td>Test 1</td>
<td>one_test1@gmail.com</td>
</tr>
<tr>
<td>3512376894</td>
<td>Test 2</td>
<td>two.test2@hotmail.com</td>
</tr>
</table>
// JavaScript
window.onload = function(){
var term = "3512376894"; // term you're searching for
var column = 0; // which column to search
var pattern = new RegExp(term, 'g'); // make search more flexible
var table = document.getElementById('dataTable');
var tr = table.getElementsByTagName('TR');
for(var i = 0; i < tr.length; i++){
var td = tr[i].getElementsByTagName('TD');
for(var j = 0; j < td.length; j++){
if(j == column && td[j].innerHTML == term){
// for more flexibility use match() function and the pattern built above
// if(j == column && td[j].innerHTML.match(pattern)){
console.log('Found it: ' + td[j].innerHTML);
}
}
}
};
Output:
Found it: 3512376894
JsBin or jsFiddle works or this jsFiddle version
+4
source to share
Pretty accurate, this is what you want to do:
function findRows(table, column, searchText) {
var rows = table.rows,
r = 0,
found = false,
anyFound = false;
for (; r < rows.length; r += 1) {
row = rows.item(r);
found = (row.cells.item(column).textContent.indexOf(searchText) !== -1);
anyFound = anyFound || found;
row.style.display = found ? "table-row" : "none";
}
document.getElementById('noresults').style.display = anyFound ? "none" : "block";
}
function performSearch() {
var searchText = document.getElementById('searchTerm').value,
targetTable = document.getElementById('dataTable');
findRows(targetTable, 0, searchText);
}
document.getElementById("searchTerm").onkeyup = performSearch;
+2
source to share
It looks like your problem is traversing the DOM. Here's how to iterate over the rows of a table:
var trs = document.getElementsByTagName('tr');
for(i = 0; i < trs.length; i++){
//trs[i] is the current table row, .children[0] selects the first child
console.log(trs[i].children[0]);
}
Then you can check innerHtml for search queries using regex or indexOf
.
0
source to share
function processTable(tableId, searchTerm, colNumber, hideCallback, showCallBack) {
var mySearchTerm = searchTerm || "",
myTable = document.getElementById(tableId) || document.createElement("TABLE"),
myRowsArray = getElements(null, "TR", myTable), //convert to array
myRowsArrayLength = myRowsArray.length;
var index = 0;
for (var i = myRowsArrayLength; --i;) {
var myTempRowElement = myRowsArray[i],
myTempColArray = getElements(null, "TD", myTempRowElement),
myTempCol = (myTempColArray.length > 0 ? myTempColArray[colNumber - 1] : document.createElement("TD")),
myText = getText(myTempCol);
if (myText === mySearchTerm) {
showCallBack(myTempRowElement);
}
else {
hideCallback(myTempRowElement);
}
}
};
function init() {
var myHandler = function (e) {
var myTermEl = document.getElementById("searchTerm"),
myTextContent = getText(myTermEl) || myTermEl.value || "";
processTable("dataTable", myTextContent, 1,
function hideCallback(el) {
el.style.display = 'none';
},
function showCallBack(el) {
el.style.display = 'table-row';
}
);
};
myHandler();
document.getElementById("searchTerm").onkeyup = myHandler;
document.getElementById("searchTerm").onchange = myHandler;
document.getElementById("searchTerm").onclick = myHandler;
};
(function () {
if (this.addEventListener) {
this.addEventListener("load", init, false)
}
else {
window.onload = init;
}
}());
var isClassMember = function (element, classname) {
var classes = element.className;
if (!classes) {
return false;
};
if (classes == classname) {
return true;
};
var whitespace = /\s+/;
if (!whitespace.test(classes)) {
return false;
};
var c = classes.split(whitespace);
for (var i = 0; i < c.length; i++) {
if (c[i] == classname) {
return true;
};
};
return false;
};
var getElements = function (classname, tagname, root, firstFlag, depth) {
if (!root) {
root = document;
}
else {
if (typeof root == "string") {
root = document.getElementById(root);
};
};
if (!tagname) {
tagname = "*";
};
if (depth) {
var maxRecursion = depth;
var all = (function getChildsElementsLevel(root, tagName, currentLevelNumber) {
var result = [],
currentLevelChilds = (function getLevelChilds(root, tagName) {
var result = [];
var children = root.firstChild;
do {
if (children.nodeName == tagName) {
result.push(children);
};
} while (children = children.nextSibling);
return result;
})(root, tagName),
currentLevelChildsLength = currentLevelChilds.length,
nextLevelNumber = ++currentLevelNumber;
for (var f = currentLevelChildsLength; f--;) {
var currentEl = currentLevelChilds[f];
result.push(currentEl);
if (nextLevelNumber < maxRecursion) {
result.concat(getChildsElementsLevel(currentEl, tagName, nextLevelNumber));
}
}
return result;
})(root, tagname, 0);
}
else {
var all = root.getElementsByTagName(tagname);
}
if (!classname) {
return all;
};
var elements = [],
allLength = all.length,
isMyClass = isClassMember;
if (firstFlag) {
for (var i = 0; i < allLength; i++) {
var element = all[i];
if (isMyClass(element, classname)) {
return element;
};
};
}
else {
for (var i = allLength; i--;) {
var element = all[i];
if (isMyClass(element, classname)) {
elements.push(element);
};
};
}
return elements;
};
var getText = function (n) {
function getStrings(n, strings) {
if (n.nodeType == 3 /* Node.TEXT_NODE */) {
strings.push(n.data);
}
else {
if (n.nodeType == 1 /* Node.ELEMENT_NODE */) {
for (var m = n.firstChild; m != null; m = m.nextSibling) {
getStrings(m, strings);
};
};
};
};
var strings = [];
getStrings(n, strings);
return strings.join("");
};
0
source to share