通过 ID 而不是索引迭代表列答案

【问题标题】：Iterate Table Column By ID Instead Of Index通过 ID 而不是索引迭代表列
【发布时间】：2020-09-01 15:38:03
【问题描述】：

好的，所以我在我的 WordPress 网站上遇到了一个小问题，希望有人可以帮助我。正如您将看到的，我使用了大量的 JavaScript 来设置我的网站的样式。主要功能将：

读取隐藏的“Level Status Preference”表并捕获“Critical Threshold”和“Low Threshold”
遍历主表并将“% Full”列与它在上一步中捕获的“Thresholds”进行比较，并相应地对其进行样式设置。（更改“级别状态”列中的文本 + 在 % 值旁边添加一个小状态图标。
统计每个“关卡状态”中“坦克”的数量
做一些其他检查以确保用户正在使用 Google Chrome、在正确的页面上、设置了默认设置并且仍然设置页面样式/提醒用户如果他们不这样做等。

我的目标不仅是稍微清理一下这段代码，而且主要是弄清楚如何根据列名而不是索引来设置样式：

我目前拥有的，现在可以使用。但我将添加一个功能让用户重新排序列，所以我需要找到另一种方法来做到这一点。

我目前有这个用于读取表格行：

jQuery('#table_5 tbody tr').each(function (i, row) {
    var pct = row.cells[8].innerHTML;
    console.log(pct);

我想要这样的东西：

jQuery('#table_5 tbody tr').each(function (i, row) {
    var pct = row.cells["column-pct_value"].innerHTML;
    console.log(pct);

这就是我的 custom.js 文件目前的样子。我对 JavaScript 还是很陌生，所以我很想得到任何反馈/建议。谢谢！

var isChrome;
if ((isChrome != !!window.chrome) && (window.location.href === "https://account.levelvision.net/login")) {
    alert("This site was built using Google Chrome. Certain features may not be available on different browsers.");
} else {

    // Initialize The Level Counters
    var criticalCount = 0;
    var lowCount = 0;
    var normalCount = 0;

    // Initialize The Default Level Status
    var critical = 15;
    var low = 30;

    jQuery(window).load(function () {

        // If user doesnt have a default set-up yet, change their defaults to 15 and 30
        if ((window.location.href === "https://account.levelvision.net/") && jQuery("#table_78_row_0 .column-criticalthreshold").text() == '') {
            alert("Looks like you don't have your defaults set up yet! Certain features will not be available until you do this. Close this alert and click the 'Tank Level Preferences' button to continue.");
            critical = 15;
            low = 30;
        }

        // If user enters a bigger critical value than low value, set them back to defaults
        if ((window.location.href === "https://account.levelvision.net/account/mytab/?updated=account") && jQuery("#table_78_row_0 .column-criticalthreshold").text() >= jQuery("#table_78_row_0 .column-lowthreshold").text()) {
            alert("Your Critical Threshold Is Larger Than Your Low Threshold. Please Update Your Values And Try Again.");
            critical = 15;
            low = 30;
        } else if ((window.location.href === "https://account.levelvision.net/") && jQuery("#table_78_row_0 .column-criticalthreshold").text() != '') {
            low = parseFloat(jQuery("#table_78_row_0 .column-lowthreshold").text());
            critical = parseFloat(jQuery("#table_78_row_0 .column-criticalthreshold").text());
        }

        console.warn(critical);
        console.warn(low);

        if (window.location.href === "https://account.levelvision.net/") {
            ColorTanksTable(); //this colors the first loaded page.
        } else if (window.location.href === "https://account.levelvision.net/demo/") {
            ColorTanksTable();
        } else if ((window.location.href === "https://account.levelvision.net/tank-details/") && (table = wpDataTables.table_1)) {
            ColorReadsTable();
        } else {
            console.warn("No Table Found");
        }

    });

    function ColorTanksTable() {
        jQuery('#table_5 tbody tr').each(function (i, row) {
            var pct = row.cells[8].innerHTML; //8
            console.log(pct);

            if (pct <= 0) {
                criticalCount++;
                console.log("Empty");
                jQuery(row.cells[9]).html("Empty");
                jQuery(row.cells[8]).css("background", "");
                jQuery(row.cells[8]).prepend('<img width="20px" height="20px" align="left" src="https://account.levelvision.net/wp-content/uploads/2020/03/Empty.png"/>');
            }

            if (pct > 0 && pct <= critical) {
                criticalCount++;
                console.log("Critical");
                jQuery(row.cells[9]).html("Critical");
                jQuery(row.cells[8]).css("background", "");
                jQuery(row.cells[8]).prepend('<img width="20px" height="20px" align="left" src="https://account.levelvision.net/wp-content/uploads/2020/02/Critical.png"/>');
            }

            console.log(critical + " < " + pct + " && " + pct + " <= " + low);
            if (critical < pct && pct <= low) {
                lowCount++;
                console.log("Low");
                jQuery(row.cells[9]).html("Low");
                jQuery(row.cells[8]).css("background", "");
                jQuery(row.cells[8]).prepend('<img width="20px" height="20px" align="left" src="https://account.levelvision.net/wp-content/uploads/2020/02/Low.png"/>');
            }

            if (pct > low && pct < 100) {
                normalCount++;
                console.log("Normal");
                jQuery(row.cells[9]).html("Normal");
                jQuery(row.cells[8]).css("background", "");
                jQuery(row.cells[8]).prepend('<img width="20px" height="20px" align="left" src="https://account.levelvision.net/wp-content/uploads/2020/02/Normal.png"/>');
            }

            if (pct >= 100) {
                normalCount++;
                console.log("Full");
                jQuery(row.cells[9]).html("Full");
                jQuery(row.cells[8]).css("background", "");
                jQuery(row.cells[8]).html("100");
                jQuery(row.cells[8]).prepend('<img width="20px" height="20px" align="left" src="https://account.levelvision.net/wp-content/uploads/2020/03/Full.png"/>');
            }

            console.log("Critical Count: " + criticalCount);
            console.log("Low Count: " + lowCount);
            console.log("Normal Count: " + normalCount);

            jQuery('#table_3 tbody tr').each(function (i, row) {
                jQuery(row.cells[0]).html(criticalCount);
                jQuery(row.cells[1]).html(lowCount);
                jQuery(row.cells[2]).html(normalCount);
            })
        });
    }

    function ColorReadsTable() {
        jQuery('#table_1 tbody tr').each(function (i, row) {
            var pct = row.cells[1].innerHTML;
            console.log(pct);

            if (pct <= 0) {
                console.log("Empty");
                jQuery(row.cells[9]).html("Empty");
                jQuery(row.cells[1]).css("background", "");
                jQuery(row.cells[1]).prepend('<img width="20px" height="20px" align="left" src="https://account.levelvision.net/wp-content/uploads/2020/03/Empty.png"/>');
            }

            if (pct > 0 && pct <= critical) {
                console.log("Critical");
                jQuery(row.cells[9]).html("Critical");
                jQuery(row.cells[1]).css("background", "");
                jQuery(row.cells[1]).prepend('<img width="20px" height="20px" align="left" src="https://account.levelvision.net/wp-content/uploads/2020/02/Critical.png"/>');
            }

            console.log(critical + " < " + pct + " && " + pct + " <= " + low);
            if (critical < pct && pct <= low) {
                console.log("Low");
                jQuery(row.cells[9]).html("Low");
                jQuery(row.cells[1]).css("background", "");
                jQuery(row.cells[1]).prepend('<img width="20px" height="20px" align="left" src="https://account.levelvision.net/wp-content/uploads/2020/02/Low.png"/>');
            }

            if (pct > low && pct < 100) {
                console.log("Normal");
                jQuery(row.cells[9]).html("Normal");
                jQuery(row.cells[1]).css("background", "");
                jQuery(row.cells[1]).prepend('<img width="20px" height="20px" align="left" src="https://account.levelvision.net/wp-content/uploads/2020/02/Normal.png"/>');
            }

            if (pct >= 100) {
                console.log("Full");
                jQuery(row.cells[9]).html("Full");
                jQuery(row.cells[1]).css("background", "");
                jQuery(row.cells[1]).html("100");
                jQuery(row.cells[1]).prepend('<img width="20px" height="20px" align="left" src="https://account.levelvision.net/wp-content/uploads/2020/03/Full.png"/>');
            }
        });
    }
}

【问题讨论】：

你能用html创建演示代码吗？
我的表格是基于 JSON 的，所以如果更容易的话，在我的网站上给你一些演示帐户的凭据可能会更容易？
关于 Stack Overflow 的问题必须是自包含的，并且包含所有相关信息，以便所有用户都能看到它以提供帮助，同时也使问题对未来的用户有用。不鼓励 DMing 信息。请查看如何创建一个minimal reproducible example，我们可以使用它来重现您正在做的事情并能够提供帮助。
不确定这是否有任何帮助，但我创建了一个带有一些测试数据的 jsfiddle，以及我想更改的一小部分代码：jsfiddle.net/cjo243v6

标签： javascript jquery wordpress

【解决方案1】：

由于某种原因，我的第一个答案被删除了，但如果其他人有同样的问题，这是我现在正在使用的解决方案：

jQuery('#table_5 tbody tr').each(function (i, row) {
    var pct = jQuery(this).find(".column-pct_value").text();
    console.log(pct);

如果其他人有更好的选择，我很想听听！

【讨论】：