[英]Search values from first column in html table using JS?
我有这张桌子
<th>Example No.</th>
<th>Column 1</th>
<tr>
<td id="SampleId">3512376894</td>
<td>two.test2@hotmail.com</td>
</tr>
我有脚本按所有列搜索值。 但我想要做的只是用td id搜索第一列的值。 但我不知道该怎么做。 请帮助我这样做? 谢谢!
这是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";
}
}
}
}
使用下面的代码段在给定列中搜索特定字词。
<!-- 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);
}
}
}
};
输出:
Found it: 3512376894
很确定这是你想要做的:
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;
听起来你的问题是横穿DOM。 以下是循环表行的方法:
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]);
}
然后,您可以使用正则表达式或indexOf
检查innerHtml中的搜索词。
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("");
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.