Code to delete rows for a table not working Javascript / HTML

Question

I have a problem with the following code. I am trying remove rows from a table if that row does not contain the meat in the td. To clarify, when the function is called, it takes in 2. (Which is where the word meat can be found in the table) Some of the rows do not contain the word meat, x = rows[i].getElementsByTagName("td")[a]; The word meat can be found in [a] of the row. I think the problem is with x.innerHTML, as I don't think it returns a value to compare to b. Any help or leads are appreciated. Right now when the button is clicked to call the function, nothing happens.

function clearTable(a) {
            var table, rows, switching, i, x, c, shouldSwitch;
            table = document.getElementById("Invtable");
            switching = true;
            var b = "meat";

            while (switching){

                switching = false;
                rows = table.getElementsByTagName("tr");

                for (i = 0; i < (rows.length); i++) {
                    shouldSwitch = false;
                    x = rows[i].getElementsByTagName("td")[a];

                    if(x.innerHTML.toLowerCase() !=  b){


                        shouldSwitch= true;
                        break;
                    }
                }
                if (shouldSwitch) {
                    table.deleteRow(i);
                    switching = true;
                }
            }
        }

 var table = "<tr>";
for (var i = 0; i < array.length; i++) {
    table += "<tr>";
    for (var j = 0; j < array[i].length; j++) {
        if (j == 6) {
            table += "<td> <img src='CSV_Photos/" + array[i][j] + "' style ='width:250px;height:250px'>" + "<br>" //every 6th column is a picture 
            + "<center> " + '<button id="btn" onClick="clickMe(\''+ array[i][1] + ',' + array[i][5] + '\')"> Buy / Add To Cart </button> </td>' + "</center>"; //button onclick takes (name+price)
        } else {
            table += "<td>" + array[i][j] + "</td>";
        }
    }
  table += "</tr>";
}

Edit: Starting from the var table, that's how the table was made in javascript in a function.

The table code in html looks like this :

<tr><td>1000</td><td>Chicken</td><td>Meat</td><td>Perfect</td><td>Yes</td><td>$2.99</td><td>image</td> </tr>

Answer 1

The problem is you are passing the incorrect column number as the argument. You only have two td per row and the index starts at 0 . So you have to pass 1 as your argument: clearTable(1) .

I created a simple table so you can see your function works with the correct argument.

EDIT

I recreated my table to have 6 columns and I created a button that runs the function onClick.

 var table = '<table id="Invtable"><tr><td>Food</td><td>chicken</td><td>Veggies</td><td>Ceral</td><td>Soda</td><td>Water</td></tr><tr><td>Food</td><td>water</td><td>Soda</td><td>Meat</td><td>Water</td><td>Ceral</td></tr><tr><td>Third-Food</td><td>Meat</td><td>Chicken</td><td>Ceral</td><td>Water</td><td>Soda</td></tr></table>'; var btn = '<button onClick="clearTable(1)">Meat</button>'; document.body.innerHTML = table + btn; //clearTable(1); function clearTable(a) { var table, rows, switching, i, x, c, shouldSwitch; table = document.getElementById("Invtable"); switching = true; var b = "meat"; while (switching){ switching = false; rows = table.getElementsByTagName("tr"); console.log(rows); for (i = 0; i < (rows.length); i++) { shouldSwitch = false; x = rows[i].getElementsByTagName("td")[a]; if(x.innerHTML.toLowerCase() != b){ shouldSwitch= true; break; } } if (shouldSwitch) { table.deleteRow(i); switching = true; } } }