Question

我创建了两个对表进行排序的函数，我想在表头中添加一个eventListener，以便当我单击其中一个头时，它使用相应的函数对表进行排序（按字母顺序或按价格）。

对于我的示例，我将仅使用sortTablePrice（）函数，因为两个函数都遇到相同的错误，我已经尝试过：

<th onclick = 'sortTablePrice()'>

在表格标题html标记中使用

而不是使用addEventListener，我得到了另一个错误：未定义函数sortTablePrice（）。当我单击标题而不是页面加载时，这些错误会出现在控制台中。

我的桌子：

$("#product_table").append("<tr><th id = 'name'>Name</th><th id = 'price'>Price</th></tr>");
document.getElementById("name").addEventListener("click", sortTableName, false);
document.getElementById("price").addEventListener("click", sortTablePrice, false);

我给出错误的函数的一部分（此函数用于按价格排序时，我有另一个函数用于按名称排序时，它得到相同的错误）：

x = rows[j].getElementsByTagName("td")[1];
y = rows[j + 1].getElementsByTagName("td")[1];
if (Number(x.innerHTML) > Number(y.innerHTML)) {
    shouldSwitch= true;
    break;
}

Number（x.innerHTML）> Number（y.innerHTML）给TypeError innerHTML未定义，x和y是行[j]或行[j + 1]和列1（列1）中的表数据是价格）。

如果这令人困惑，我将发布更多代码，只是不想让发布时间过长，谢谢。

function sortTablePrice() {
var table, rows, switching, j, x, y, shouldSwitch, switchcount = 0;
table = document.getElementById("product_table");
switching = true;
while (switching) {
    switching = false;
    rows = table.rows;
    for (j = 1; j < (rows.length - 1); j++) {
        shouldSwitch = false;
        x = rows[j].getElementsByTagName("td")[1];
        y = rows[j + 1].getElementsByTagName("td")[1];
        if (Number(x.innerHTML) > Number(y.innerHTML)) {
            shouldSwitch= true;
            break;
            }
        }
        if (shouldSwitch) {
            rows[j].parentNode.insertBefore(rows[j+1],rows[j]);
            shouldSwitch = true;
        }
    }
}

Uncaught TypeError：无法在开发人员工具控制台中读取未定义错误的属性“ innerHTML”

0 个答案: