删除表格行的代码不起作用Javascript / HTML

Question

我对以下代码有疑问。如果该行不包含 td 中的肉，我正在尝试从表中删除行。澄清一下，当函数被调用时，它接受了 2。（在表中可以找到肉这个词的地方） 有些行不包含单词肉，x = rows[i].getElementsByTagName("td")[a];可以在该行的 [a] 中找到单词肉。我认为问题出在 x.innerHTML 上，因为我认为它不会返回与 b 进行比较的值。 任何帮助或线索表示赞赏。现在，当单击按钮调用该函数时，什么也没有发生。

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

编辑：从 var 表开始，这就是在函数中用 javascript 制作表的方式。

html中的表格代码如下：

<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

问题是您传递了错误的列号作为参数。每行只有两个td，索引从0 开始。所以你必须通过1 作为你的论点：clearTable(1)。

我创建了一个简单的表格，以便您可以看到您的函数使用正确的参数。

编辑

我重新创建了包含 6 列的表，并创建了一个运行 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;
                }
            }
        }