按值获取HTML表行

我有一个HTML表：

<table id="colorTable">
<tr>
<th>Name</th>
<th>Favorite Color</th>
</tr>
<tr>
<td>Tom</td>
<td>Orange</td>
</tr>
<tr>
<td>Sam</td>
<td>Red</td>
</tr>
</table>

我想做一个JS函数，在第一列中找到"Sam"，并用"Green"替换第二列

function replace(search, replace) {
}

这是一个基于另一篇文章的函数，它在表中找到任何与searchText匹配的单词，并将其替换为replace字符串。我想做的是只按第一列进行筛选，然后更改找到的行的第二列中的文本。

function findAndReplace(searchText, replacement, searchNode) {
if (!searchText || typeof replacement === 'undefined') {
// Throw error here if you want...
return;
}
var regex = typeof searchText === 'string' ?
new RegExp(searchText, 'g') : searchText,
childNodes = (searchNode || document.body).childNodes,
cnLength = childNodes.length,
excludes = 'html,head,style,title,link,meta,script,object,iframe';
while (cnLength--) {
var currentNode = childNodes[cnLength];
if (currentNode.nodeType === 1 &&
(excludes + ',').indexOf(currentNode.nodeName.toLowerCase() + ',') === -1) {
arguments.callee(searchText, replacement, currentNode);
}
if (currentNode.nodeType !== 3 || !regex.test(currentNode.data) ) {
continue;
}
var parent = currentNode.parentNode,
frag = (function(){
var html = currentNode.data.replace(regex, replacement),
wrap = document.createElement('div'),
frag = document.createDocumentFragment();
wrap.innerHTML = html;
while (wrap.firstChild) {
frag.appendChild(wrap.firstChild);
}
return frag;
})();
parent.insertBefore(frag, currentNode);
parent.removeChild(currentNode);
}
}

分析：

function changeColor(name, color) {
$("#colorTable tr").each(function(i, el){
if($(this).children("td:eq(0)").text() == name) {
$("#colorTable tr:eq("+i+")").children("td:eq(1)").text(color);
}
});  
}
changeColor("Sam", "Green");

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<table id="colorTable">
<tr>
<th>Name</th>
<th>Favorite Color</th>
</tr>
<tr>
<td>Tom</td>
<td>Orange</td>
</tr>
<tr>
<td>Sam</td>
<td>Red</td>
</tr>
</table>

</body>
</html>

function replaceColor(tableID, newContent, colToChange, searchSt, searchCol=0) {
const fromHtmlTable = [...document.querySelector(tableID).rows]    
fromHtmlTable.forEach(row => {
if (row.cells[searchCol].innerHTML === searchSt) { 
row.cells[colToChange].innerHTML = newContent
}
)
}

现在，使用功能：

replaceColor("#colorTable","Green",1,"Sam"))

相关内容

最新更新

热门标签：