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>

When you step through this in your debugger, where/how specifically does it fail? What are the runtime values when that happens? — David
– David, Commented Jun 5, 2017 at 23:25
Oh I forgot about the debugger. When it runs, it says that x is undefined. — DaNubCake
– DaNubCake, Commented Jun 5, 2017 at 23:30
More specifically x is undefined in this line if(x.innerHTML.toLowerCase() != b){ — DaNubCake
– DaNubCake, Commented Jun 6, 2017 at 0:56

JJJ · Accepted Answer · 2017-06-06 00:15:09Z

2

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

edited Jun 6, 2017 at 0:15

answered Jun 5, 2017 at 23:49

JJJ

3,3525 gold badges31 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

DaNubCake Over a year ago

Unfortunately that does not work, and x is still undefined when I run the debugger.

JJJ Over a year ago

what is array in your code? when you are creating the table?

DaNubCake Over a year ago

array is a 2D array, within every one row is 6 columns.

JJJ Over a year ago

can you post it? also, how are you calling the function? is it inline on an HTML element?

DaNubCake Over a year ago

The function clearTable is being called by an HTML element. This is how <button class="dropbtn" onclick="clearTable(1)"> Meat </button> Furthmore array is a big array that is creating with a csv file. But essentially, [0][0] is 1000, [0][1] is Chicken, [0][2] is Meat, [0][3] is blah all the way to [0][6] which is something else. And this continues essentially but the elements in the array aren't the same of course.

|

Collectives™ on Stack Overflow

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

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related