I have a HTML Table:
<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>
I want to make a JS function that will find "Sam"
in the first column and replace the second column with "Green"
function replace(search, replace) { }
This is a function based off another article, it find any word matching searchText
in the table and replaces it with the replace
string. What I want to do is filter only by the first column and then change the text in the second column of the found row.
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); } }
Advertisement
Answer
Analyse that:
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>