试图循环遍历表行数据答案

【问题标题】：Trying to loop through table row data试图循环遍历表行数据
【发布时间】：2020-02-26 23:03:59
【问题描述】：

这是我目前的代码，我在控制台中收到的错误消息之一是：TypeError: table.rows is undefined

<html>
<body>
<center>
<button onclick="generate();">Generate Link</button>

<p id="link"></p>

<script>
function generate() {
        var table = document.getElementsByClassName("jet-table__body");

        for (var i = 0 ; i < table.rows.length; i++) {

            var row = "";

            for (var j = 0; j < table.rows[i].cells.length; j++) {

                row += table.rows[i].cells[j].innerHTML;
                row += " | ";
            }
        }

            document.getElementById("link").innerHTML = "Output " + row;
} 

//<tbody class="jet-table__body"><tr class="jet-table__body-row elementor-repeater-item-2ff5154"><td class="jet-table__cell elementor-repeater-item-19d06f7 jet-table__body-cell"><div class="jet-table__cell-inner"><div class="jet-table__cell-content"><div class="jet-table__cell-text"><input type="checkbox" id="course_1" value="sexualmisconduct"></div></div></div></td><td class="jet-table__cell elementor-repeater-item-68f78f2 jet-table__body-cell"><div class="jet-table__cell-inner"><div class="jet-table__cell-content"><div class="jet-table__cell-text">Sexual Misconduct</div></div></div></td><td class="jet-table__cell elementor-repeater-item-3265bce jet-table__body-cell"><div class="jet-table__cell-inner"><div class="jet-table__cell-content"><div class="jet-table__cell-text">Desription here</div></div></div></td><td class="jet-table__cell elementor-repeater-item-ed15953 jet-table__body-cell"><div class="jet-table__cell-inner"><div class="jet-table__cell-content"><div class="jet-table__cell-img jet-table__cell-img--before"><img src="image" alt="" srcset="imagesizes="(max-width: 150px) 100vw, 150px" width="150" height="150"></div></div></div></td><td class="jet-table__cell elementor-repeater-item-0d8ca23 jet-table__body-cell"><div class="jet-table__cell-inner"><div class="jet-table__cell-content"><div class="jet-table__cell-text"><a href="link">Trailer</a></div></div></div></td></tr><tr class="jet-table__body-row elementor-repeater-item-6027947"><td class="jet-table__cell elementor-repeater-item-199b2c7 jet-table__body-cell"><div class="jet-table__cell-inner"><div class="jet-table__cell-content"><div class="jet-table__cell-text"><input type="checkbox" id="course_2" value="negotiations"></div></div></div></td><td class="jet-table__cell elementor-repeater-item-2753fdb jet-table__body-cell"><div class="jet-table__cell-inner"><div class="jet-table__cell-content"><div class="jet-table__cell-text">Negotiations</div></div></div></td></tr></tbody>

</center>
</body>
</html>

我的表格数据有点乱，因为我们使用的是 Elemantor，但它在后面的代码中被注释掉了。

欢迎任何建议，提前谢谢。

【问题讨论】：

这能回答你的问题吗？ What do querySelectorAll and getElementsBy* methods return?

标签： javascript jquery html wordpress

【解决方案1】：

document.getElementsByClassName 返回一个类似数组的对象，因此您应该首先在该对象中找到您的表。假设它是文档中唯一具有给定类的表，您可以修改函数的第一行如下：

var table = document.getElementsByClassName("jet-table__body")[0];

我不熟悉 Elemantor，但似乎 jet-table__body 是您的 <tbody> 的类，而不是您的 <table>。使用 <table> 的类调用 document.getElementsByClassName 会有所帮助。

【讨论】：