I have a HTML Table: I want to make a JS function that will find “Sam” in the first column and replace the second column with “Green” 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 …

Get HTML Table Row by Value

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);
    }
}

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>

Advertisement

Answer