我尝试在共享点上突出显示我的表行，如果它与数组中的任何内容匹配，为什么不起作用？

Question

I have a table on Sharepoint and an array, I tried to compare them and highlight the ones that match but it doesn't work. Please help! The following code is coded in Javascript. I have tried various ways and tweaked accordingly according to my findings all around the web but nothing seems to be able to resolve this issue.

    //gets table
var oTable = document.getElementById('tablename');

//gets rows of table
var rowLength = oTable.rows.length;

//loops through rows    
for (i = 0; i < rowLength; i++){

  //gets cells of current row  
   var oCells = oTable.rows.item(i).cells;

   //gets amount of cells of current row
   var cellLength = oCells.length;

   //loops through each cell in current row
   for(var j = 0; j < cellLength; j++){

        // get your cell info here

        var cellVal = oCells.item(j).innerHTML;
        console.log(cellVal);

        var serverRelativeUrlOfMyFile = "https://Sharepointsite/Blacklist.txt";
        $.ajax({
            url: serverRelativeUrlOfMyFile,
            type: "GET"
        }).done(handler);
        function handler(data){
            //console.log(data);
            var lines = data.split('\n');
            for(var line = 0; line < lines.length; line++)
            {
                if (cellVal.includes(lines[line])){
                    oCells.item[j].style.background = "red";
                }
            }
        }
    }
}

Below's another way that I tried to match my table on Sharepoint with my array. It works partially - Only the last item in the array gets matched when I run through the array properly. I don't really understand so appreciate the people out there who can help! Thanks a lot in advance.

(Additional Information!) I create my table on Sharepoint by generating a table using Javascript with the executeQueryAsync function to retrieve data from a Sharepoint list and then producing it out as a viewable HTML table.

        var serverRelativeUrlOfMyFile = "https://Sharepointsite/SoftwaresBlacklist.txt";
$.ajax({
url: serverRelativeUrlOfMyFile,
type: "GET"
}).done(handler);
function handler(data){
//console.log(data);
var lines = data.split('\n');
    for(var line = 0; line < lines.length; line++){
        //var templines = lines;
        //alert(lines[line]);

        $("#tablename tr:contains('" + lines[line] + "')").css("background-color", "red");
    }
}

Answer 1

I ran into something similar recently. It came down to an issue of "scope" when referring to objects outside of the AJAX function.

Try something like this: (the new property named "theCells" and the line that starts with "this.theCells".)

    $.ajax({
        url: serverRelativeUrlOfMyFile,
        theCells: oCells,
        type: "GET"
    }).done(handler);
    function handler(data){
        //console.log(data);
        var lines = data.split('\n');
        for(var line = 0; line < lines.length; line++)
        {
            if (cellVal.includes(lines[line])){
                //oCells.item[j].style.background = "red";
                this.theCells.item(j).style.background = "red";
            }
        }
    }

Answer 2

Another note, "item" is a method, so should use (), not [].

this.theCells.item[j].style.background = "red";

this.theCells.item(j).style.background = "red";